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

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.

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

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,