时间戳

首页 > 解决方案 > 分段渐变而不是线性渐变

html - 分段渐变而不是线性渐变

问题描述

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

在此处输入图像描述

我读了这个例子，但我没有设法让它按预期工作。 

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

标签： htmlcss

解决方案

您需要为颜色指定颜色停止值，否则它将延伸到 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>

推荐阅读