线性渐变中的颜色停止参数

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%，这意味着，在 repeating 渐变的情况下，渐变本身将在元素高度的 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>

Color Stop Parameter in Linear Gradient