Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS функция repeating-linear-gradient() создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с linear-gradient и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа <gradient>, являющегося разновидностью типа данных <image>.

/* Повторяющийся градиент с углом наклона 45 градусов,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(45deg, blue, red);

/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
   начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(to left top, blue, red);

/* Повторяющийся градиент идущий от низа к верху,
   начинающийся с синего, переходящего в зеленый на 40%,
   и заканчивающийся красным цветом */
repeating-linear-gradient(0deg, blue, green 40%, red);

С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.

Повторяющийся линейный градиент (как и любой прочий градиент) не имеет размерностей по умолчанию; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.

Примечание: Поскольку <gradient> относится к типу данных <image> , он может быть использован только там где применим тип <image>. По этой причине repeating-linear-gradient() не будет работать с background-color и прочими свойствами использующими тип данных <color>.

Синтаксис

Значения

<сторона-или-угол>
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
<угол>
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
<цвет-позиция>
Значение <цвета> с последующей (необязательной) его позицией (либо в <процентах>, либо в единицах <длины> вдоль оси градиента).

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

Formal syntax

repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
                            \---------------------------------/ \----------------------------/
                              Определение линии градиента         Список цветов и их позиций  

где <сторона-или-угол> = [left | right] || [top | bottom]
   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?

Примеры

Полоски зебры

body {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 20px,
      black 20px,
      black 40px);
}

Повторяющиеся горизонтальные полосы

body {
  background-image: repeating-linear-gradient(to bottom,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

Спецификации

Спецификация Статус Примечание
CSS Images Module Level 3
Определение 'repeating-linear-gradient()' в этой спецификации.
Кандидат в рекомендации Initial definition.

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Базовая поддержка (в background и background-image) 3.6 (1.9.2)-moz[3]
16 (16)[5]
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.10-o [3] 5.1-webkit[2][3]
В border-radius 29 (29) (Да) (Да) (Да) (Да)
В любом свойстве принимающем <image> Нет (Да) (Да) (Да) (Да)
Устаревший синтаксис webkit Нет 3-webkit [2] Нет Нет 4.0-webkit[2]
Устаревший from синтаксис (без ключа to) 3.6 (1.9.2)-moz[4]
Removed in 16 (16)[7]
10.0 (534.16)-webkit [2] 10.0 11.10-o[4] 5.1-webkit[2]
Синтаксис to 10 (10)-moz[4]
16 (16)
26.0 10.0 11.60-o[4]
Presto 2.12 will remove the prefix.
Нет
Interpolation hints/gradient midpoints (a percent without a color) 36 (36) 40 ? 27 (Да)[6]
Unitless 0 for <angle> 46 (46)-webkit[8]
Нет[9]
(Да) Edge 12 (Да) (Да)
Feature Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
Базовая поддержка 1.0 (1.9.2)-moz[3]
16.0 (16)[5]

16-webkit
26

10 (Да) (Да)[6]

[1] Internet Explorer с версии 5.5 до 9.0 поддерживает проприетарный фильтр filter: progid:DXImageTransform.Microsoft.Gradient().

[2] WebKit начиная с версии 528 поддерживает устаревшую функцию -webkit-gradient(linear,…). Начиная с WebKit 534.16 он также поддерживает стандартный синтаксис градиаентов. В отличии от Gecko в старых версиях WebKit вы не можете задать позицию вместе с углом в -webkit-linear-gradient(). Достигнуть того же эффекта можно сдвигая позиции цветов.

[3] Gecko, Opera и Webkit начинают отсчет <угла> с права вместо верха. Т.е. они расценивают угол 0deg как направление линии вправо. Это отличается от последней спецификации где угол 0deg означает направление линии вверх. В Firefox, начиная с версии 42, версию функций градиента с префиксом можно отключить установив опцию layout.css.prefixes.gradients в false.

[4] Firefox 3.6 и Opera 11.10 реализовали функции с префиксом с ранним синтаксисом где начальный угол или сторона задавались без ключевого слова to, и по сути рассматривались как координата from (противоположность to). Синтаксис с to был добавлен в Firefox 10 и Opera 11.60  вначале без удаления устаревшего синтаксиса. Переход от одного синтаксиса к другому прост:

-moz-repeating-linear-gradient(to top left, blue, red);

то же самое что:

-moz-repeating-linear-gradient(bottom right, blue, red);

Устаревший синтаксис, без to, планируется убрать когда уберут поддержку функций с префиксом.

[5] До Firefox 36, Gecko не применяла градиент к гамме цветов с альфаканалами, что приводило к неожиданным серым затемнениям при использовании прозрачности.

[6] Баг WebKit 1074056.

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See баг 1239153.

[9] Смотрите баг 1363292.

Дополнительно

Метки документа и участники

 Внесли вклад в эту страницу: arcady-zherdev
 Обновлялась последний раз: arcady-zherdev,