线性梯度中的色停参数

Question

我有这种重复的线性渐变CSS设计。

#div1{
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

我知道颜色参数是什么意思，但颜色看起来很模糊之后的百分比。它真正意味着什么？这是否确定了颜色必须开始的位置？或者什么？

我已经阅读了documentation，但我无法理解。有人可以用简单的词语向我解释一下吗？

谢谢。

Answer 1

好的，我会试一试......但首先文件是实际的w3.org ...而不是W3Schools！

这是你的代码（假设div高度为100px）：

#div1 {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
  height: 100px;
}

<div id="div1"></div>

所以你的最终％数字是20％，这意味着，在重复渐变的情况下，渐变本身将以元素高度的20％结束然后重复。 / p>

所以100％/ 20％= 5，所以梯度重复5次。

查看最后一个号码更改时会发生什么

#div1 {
  background: repeating-linear-gradient(red, yellow 10%, green 33.33%);
  height: 100px;
}

<div id="div1"></div>

现在每个百分比，让我们试试这个标准的从左到右的渐变

#div1 {
  background: linear-gradient(to right, red, yellow 10%, green 20%);
  height: 100px;
}

<div id="div1"></div>

这里颜色停止工作。

渐变开始呈红色，并逐渐变化，直到它在宽度的10％处呈黄色。颜色将再次开始变化，这次变为绿色，直到它在宽度的20％处完全变为绿色...然后保持该颜色，因为病房后没有提到其他颜色。

对于纯色带（例如黄色），颜色必须以不同的值显示两次

#div1{
    background: linear-gradient(to right, red, yellow 10%, yellow 20%, green 30%);
    height: 100px;
}

<div id="div1"></div>

您可以通过在从一种颜色更改为另一种颜色时重复百分比值来获得硬线更改

#div1 {
  background: linear-gradient(to right, red 10%, yellow 10%, yellow 20%, green 20%);
  height: 100px;
}

<div id="div1"></div>