分段梯度而不是线性梯度

Question

我试着用渐变做更明显的颜色。我希望能够看到他们之间的过渡。就像这个例子。

​

​

我读过这示例，但没有按照预期的方式工作。

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

​