Параметр цветовой остановки в линейном градиенте

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>