css - 线性渐变中的色标参数

Question

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

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

我知道颜色参数是什么意思，但颜色后面的百分比似乎含糊不清。它的真正含义是什么？那是标识颜色必须开始的位置吗？要不然是啥？

我已经阅读了文档，但我无法理解。有人可以用更简单的语言向我解释吗？

谢谢你。

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>