CSS背景渐变没有按预期工作答案

【问题标题】：CSS background gradient not working as expectedCSS背景渐变没有按预期工作
【发布时间】：2016-11-18 10:48:58
【问题描述】：

我计划在一个 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 种颜色只会创建纯色。我在这里遗漏了什么吗？

【问题讨论】：

你想要这样的东西吗：background: linear-gradient(to top, rgba(18,61,87, 1) 34%, rgba(0,0,0, 0.6) 67%, rgba(18,61,87, 1) 100%);？

标签： html css linear-gradients

【解决方案1】：

原因：

渐变定义中的百分比指定颜色停止点，而不是每种颜色的长度/持续时间。所以，第一种颜色应该是 0%，第二种颜色（中间）应该是 33/34%，第二种颜色（中间）应该是 67%，第三种颜色应该是 100%，如果你是 正在寻找 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%标记，然后rgba(0, 0, 0, 0.6)从33% 标记（不会显示，因为之前的颜色应用到 34% 标记并且下一个颜色从 开始34%) 然后它有rgba(18, 61, 87, 1) 从 34% 到结束与第一种颜色相同，因此您最终只会看到纯色。

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

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

#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%);
}

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

生成 3 色渐变：

实际上，如果您需要 3 色渐变，那么正确的方法是将色标设置为 0%、50% 和 100%。这意味着颜色从 rgba(18, 61, 87, 1) 开始，慢慢地从这个颜色变为 rgba(0, 0, 0, 0.6) 并在 50% 处完成更改，然后再次开始从该颜色变为 rgba(18, 61, 87, 1) 并在 100% 处完成更改。

#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%);
}

<div id="box">
</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) 34%, rgba(0, 0, 0, 0.6) 67%, rgba(18, 61, 87, 1) 67%);
}

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

【讨论】：

【解决方案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 ); 
    }

【讨论】：

【解决方案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 渐变 here

【讨论】：

【解决方案4】：

希望下面的代码对您有所帮助。祝你好运！！

#box{
  border:1px solid #ccc;
    width:400px;
    height:400px;
    background: #123d57;
    background: -moz-linear-gradient(top,  #123d57 33%, #123d57 34%, #000000 50%);
    background: -webkit-linear-gradient(top,  #123d57 33%,#123d57 34%,#000000 50%);
    background: linear-gradient(to bottom,  #123d57 33%,#123d57 34%,#000000 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#000000',GradientType=0 );

}

【讨论】：

【解决方案5】：

上面给出的解决方案都不适合我，因为我试图转换 html to pdf。 PDF 中的背景渐变在某些软件中可见，但在其他软件中不可见。因此，作为一种变通方法，我必须使用可以在背景图像中重复的从上到下的渐变图像。我希望有我这种需求的人会发现这种解决方法很有用。

【讨论】：