Question

我计划在DIV上有3个条纹，但这不能按预期工作：

#box {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  background: linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 33%, rgba(18, 61, 87, 1) 34%);
}

<div id="box">
</div>

如果我将2种颜色设为50％，则可以使用，但只有3种颜色才会产生纯色。我在这里错过了什么吗？

Answer 1

<强>原因：

渐变定义中的百分比指定颜色停止点，而不是每种颜色的长度/持续时间。 ~~因此，第一种颜色应为0％，第二种颜色应为33/34％（中间），第二种颜色应为67％（中间），如果 <则为第三种颜色为100％ em>寻找3色渐变 。~~

当您将其指定为linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 33%, rgba(18, 61, 87, 1) 34%)时，它意味着rgba(18, 61, 87, 1)直到 34％ 标记，然后{strong}来自 33％ 标记（由于之前的颜色已经应用，直到 34％ 标记并且下一个颜色从 34％ ）然后 34％ 的rgba(0, 0, 0, 0.6)直到结束与第一种颜色相同，因此您最终只会看到纯色。

为什么两种50％的颜色有效？

当你为两者提供50％因为这将产生 硬停止渐变 时会有效，其中第一种颜色以50％结束，第二种颜色开始锐利从50％到100％。所以它看起来有两个部分。

rgba(18, 61, 87, 1)

#box {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  background: linear-gradient(to top, rgba(18, 61, 87, 1) 50%, rgba(0, 0, 0, 0.6) 50%);
}

制作3色渐变：

实际上，如果 需要3色渐变 ，那么正确的方法是将色标设置为0％，50％和100％。这意味着颜色从<div id="box"> </div>开始，从此颜色缓慢变为rgba(18, 61, 87, 1)并完成50％的更改，然后再次开始从该颜色更改为rgba(0, 0, 0, 0.6)并完成更改100％。

rgba(18, 61, 87, 1)

#box {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  background: linear-gradient(to top, rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
}

制作3条条纹：（我认为这就是您所需要的）

如果您 需要三个条纹而不是渐变 ，那么您需要更多颜色停止，例如此处

<div id="box">
</div>

#box {
  border: 1px solid #ccc;
  width: 400px;
  height: 400px;
  background: linear-gradient(to top, rgba(18, 61, 87, 1) 34%, rgba(0, 0, 0, 0.6) 34%, rgba(0, 0, 0, 0.6) 67%, rgba(18, 61, 87, 1) 67%);
}

Answer 2

你快到了，试试这个CSS

     #box {
        background: #123d57;
        background: -moz-linear-gradient(top, #123d57 0%, #123d57 33%, #000000 34%, #000000 65%, #123d57 66%, #123d57 100%);
        background: -webkit-linear-gradient(top, #123d57 0%,#123d57 33%,#000000 34%,#000000 65%,#123d57 66%,#123d57 100%); 
        background: linear-gradient(to bottom, #123d57 0%,#123d57 33%,#000000 34%,#000000 65%,#123d57 66%,#123d57 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#123d57',GradientType=0 ); 
    }

Answer 3

请试一试。

<!doctype html>
<html>

<head>
    <style>
        #box {
            border: 1px solid #ccc;
            width: 400px;
            height: 400px;
            background: #123d57;
            background: -webkit-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
            background: -moz-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
            background: -o-linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
            background: linear-gradient(rgba(18, 61, 87, 1) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(18, 61, 87, 1) 100%);
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#123d57', GradientType=0)
        }
    </style>
</head>

<body>
    <div id="box">
    </div>
</body>

</html>

您生成类似的CSS Gradients here

Answer 4

希望以下代码对您有所帮助。祝你好运!!

>>> cumargmax(a)
array([[0, 0],
       [1, 1],
       [2, 2],
       [2, 2],
       [2, 2],
       [2, 2],
       [2, 2],
       [7, 2],
       [7, 2],
       [7, 2]])

CSS背景渐变无法按预期工作

4 个答案: