html - CSS 背景线性渐变曲线

标签 html css

我正在尝试创建 3 种不同颜色深浅的​​蓝色背景。 3 种蓝色色调中的 2 种将 flex 并略微倾斜。

  • 主背景蓝色:#005A83
  • 第一个浅蓝色:#036595
  • 第二个浅蓝色:#0571A4

  • 我已经做了一些研究,我相信我可以通过使用线性梯度来实现这一点,但我仍然遇到一些问题,以获得我期望的外观。
    我尝试在此处重新创建类似此图像的内容:
    enter image description here
    这是我的代码示例:

    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/

    相关文章:

    javascript - 我如何完成此按钮阵列以使其工作?

    javascript - 如何将建议附加到文本输入中?

    javascript - 单击时将轮播元素移动到轮播中间(JavaScript)

    javascript - 如何通过 JavaScript 制作按钮来控制时间轴上的步骤

    html - flex 方向 : row is not working; it's still displaying as a column

    jquery - 杂费多类

    html - mkdocs-material 中 Chrome 与 Firefox 的广泛表格差异

    javascript - JavaScript网址修改

    javascript - 如何使用JQuery以非常平滑的方式将用户的屏幕向下移动到底部?

    css - Bootstrap 3 Nav折叠css问题