我正在尝试创建 3 种不同颜色的蓝色背景。 3 种蓝色阴影中的 2 种会 flex 并略微倾斜。
- 主背景蓝色:
#005A83
- 第一个较浅的蓝色阴影:
#036595
- 第二种浅蓝色:
#0571A4
我做了一些研究,我相信我可以通过使用线性渐变来实现这一点,但我在获得我期望的外观方面仍然遇到一些问题。
我试图在这里重新创建类似这张图片的东西:
这是我的代码示例:
html, body {
height: 100%;
}
body {
background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);
}
我对这两个主要部分有疑问。
我在显示 2 种较浅的蓝色阴影时遇到问题。目前仅显示 1 种颜色。我试图通过移动一些用于线性渐变的百分比来解决这个问题,但它会将颜色混合在一起,这更难以看到。
如何 flex 较浅的阴影以匹配上面显示不同蓝色阴影的图像。
最佳答案
您可以进行径向渐变,然后将其中心移出页面。根据您的示例,您需要相当大的半径。
我在下面做了一个粗略的尝试。您需要调整圆圈大小(第一个值)、偏移量(第二个和第三个值)和各个停止百分比以获得您认为完美的结果。
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%);
}
关于html - CSS背景线性渐变曲线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70013370/