线性渐变中的色标参数

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% 处结束，然后重复。

所以 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>