logo标签列表

CSS背景线性渐变曲线

htmlcss
3

我试图创建一个由3种不同颜色的蓝色构成的背景，其中2种蓝色的色调会稍微有些弯曲和倾斜。

  • 主要的背景蓝色：#005A83
  • 第一种较浅的蓝色：#036595
  • 第二种较浅的蓝色：#0571A4

我进行了一些研究，相信可以使用线性渐变来实现这一点，但我仍然遇到了一些问题，无法获得我期望的外观。

我试图重新创建像这张图片一样的东西:

enter image description here

以下是我的代码示例：

html, body {
    height: 100%;
}
body {

    background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);
}

我在这两个方面遇到了问题。

  1. 我发现只有一个浅蓝色被显示出来，无法将另外的浅蓝色显示出来。我尝试通过改变linear-gradient中使用的一些百分比来解决这个问题，但是这样会让颜色混合在一起，更难以看清。

  2. 如何使浅色调与上面展示的不同蓝色匹配，并呈现出弧形效果。

1
对于曲线，请使用径向渐变而不是线性渐变。 - random person
整个背景会是径向渐变吗？还是我可以同时使用两种渐变？ - kurtixl
我认为你只能使用一个渐变。尝试这样做：background: radial-gradient(circle at 0%, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%); 我知道这并不能解决模糊问题，但也许看一下这个会有所帮助。 - random person
1
在background-image中，您可以将线性、径向和圆锥渐变混合使用，任意组合。用逗号分隔它们。第一个值优先应用。 - A Haworth
2个回答
1
你可以使用多个HTML元素来实现所需的结果。
 <body>
    <div class="container">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
    </div>
  </body>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  height: 500px;
  width: 100%;
  background-color: rgb(10, 5, 87);
  overflow: hidden;
}

.circle1 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(0, 0, 105);
  left: 0;
  bottom: 0;
  height: 600px;
  width: 600px;
  transform: translate(-50%, 50%);
  z-index: 4;
}

.circle2 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(22, 22, 148);
  left: 0;
  bottom: 0;
  height: 1200px;
  width: 1200px;
  transform: translate(-50%, 50%);
  z-index: 3;
}

.circle3 {
  border-radius: 100%;
  position: absolute;
  background-color: rgb(6, 6, 180);
  left: 0;
  bottom: 0;
  height: 1800px;
  width: 1800px;
  transform: translate(-50%, 50%);
  z-index: 2;
}
1
你可以创建一个径向渐变，然后将其中心移出页面。根据你的示例，需要较大的半径。
我在下面进行了初步尝试。您需要调整圆的大小（第一个值），偏移量（第二个和第三个值）以及各个停止百分比，以获得您认为完美的效果。 

html, body {
    height: 100%;
}
body {
    background: rgb(0,90,131) radial-gradient(circle 5000px at -200px 200%, rgba(0,90,131,1) 0%, rgba(0,90,131,1) 10%, rgba(3,101,149,1) 10%, rgba(3,101,149,1) 12%, rgba(5,113,164,1) 12%, rgba(5,113,164,1) 13%, rgba(0,90,131,1) 13%, rgba(0,90,131,1) 100%);
}

1
使用两次 background 有点无意义，第二个会覆盖第一个。你可以省略第一个。或者具体使用 background-color 和 background-image。或将它们合并为一个 background: rgb(0,90,131) radial-gradient(...);。 - RoToRa
我不相信他想要一个渐变。 - Jason
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接