分段渐变而不是线性渐变

Question

我试图在渐变中制作更明显的颜色。我希望能够看到它们之间的过渡。就像这个例子。

我阅读了 this 示例，但我没有设法让它按预期工作。

#grad {
  width:100%;
  height: 200px;
  background-image: linear-gradient(to top right, #006723 0%, #00852D 25%, #009733 50%, #00A739 100%);
}

<div id="grad"></div>

Answer 1

您需要为颜色指定颜色停止值，否则它将扩展到 100%，从而获得褪色效果。

例如：#006723 现在从 0 开始并延伸到 25%，下一个颜色 #00852D 从同一个停止点开始。不过，在这种情况下，您无需为最后一种颜色指定第一个和最后一个点的起点。

#grad {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(to top right, #006723 25%, #00852D 25%, #00852D 50%, #009733 50%);
}

<div id="grad"></div>