html - CSS 背景渐变未按预期工作

Question

我计划在一个 DIV 上有 3 个条纹，但这没有按预期工作:

https://jsfiddle.net/1wzg0xep/

#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% 标记和然后 rgba(0, 0, 0, 0.6) 来自 33% 标记(不会显示，因为以前的颜色一直应用到 < strong>34% 标记，下一个颜色从 34% 开始，然后它有 rgba(18, 61, 87, 1) 从 34% 到 end 与第一个相同颜色，所以您最终只会看到纯色。

---

为什么 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>

---

Producing 3 Stripes:(我想这就是你需要的)

如果您需要三条纹而不是渐变，那么您需要像这里这样的更多色标

#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>