repeating-linear-gradient()

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

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.

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
repeating-linear-gradient()Chrome Полная поддержка 26
Полная поддержка 26
Полная поддержка 10
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Полная поддержка 3.6
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Полная поддержка 10
Замечания
Полная поддержка 10
Замечания
Замечания Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Нет поддержки 11 — 15
С префиксом Замечания
С префиксом Требует вендорный префикс: -o-
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Полная поддержка 6.1
Полная поддержка 6.1
Полная поддержка 5.1
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Полная поддержка ≤37
Полная поддержка ≤37
Полная поддержка ≤37
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 26
Полная поддержка 26
Полная поддержка 18
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Firefox Android Полная поддержка 16
Замечания
Полная поддержка 16
Замечания
Замечания Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Полная поддержка 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Полная поддержка 44
С префиксом Отключено
С префиксом Требует вендорный префикс: -webkit-
Отключено From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 12.1
Полная поддержка 12.1
Полная поддержка 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Нет поддержки 11 — 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -o-
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS Полная поддержка 6.1
Полная поддержка 6.1
Полная поддержка 6
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Замечания Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Samsung Internet Android Полная поддержка 1.5
Полная поддержка 1.5
Полная поддержка 1.0
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Double-position color stopsChrome Полная поддержка 71Edge Полная поддержка 79Firefox Полная поддержка 64IE Нет поддержки НетOpera Полная поддержка 58Safari Полная поддержка 12.1WebView Android Полная поддержка 71Chrome Android Полная поддержка 71Firefox Android Полная поддержка 64Opera Android Полная поддержка 50Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 10.0
Interpolation Hints / Gradient MidpointsChrome Полная поддержка 40Edge Полная поддержка 79Firefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 27Safari Полная поддержка 6.1WebView Android Полная поддержка 40Chrome Android Полная поддержка 40Firefox Android Полная поддержка 36Opera Android Полная поддержка 27Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 4.0
to keywordChrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 10IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 10Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5
Unitless 0 for <angle>Chrome Полная поддержка 26Edge Полная поддержка 12Firefox Полная поддержка 55
Полная поддержка 55
Частичная поддержка 46
Замечания
Замечания Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
IE Нет поддержки НетOpera Полная поддержка 16Safari Полная поддержка 6.1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 26Firefox Android Полная поддержка 55
Полная поддержка 55
Частичная поддержка 46
Замечания
Замечания Accepted only in -webkit-repeating-linear-gradient() and -moz-repeating-linear-gradient(), not repeating-linear-gradient().
Opera Android Полная поддержка 14Safari iOS Полная поддержка 6.1Samsung Internet Android Полная поддержка 1.5

Легенда

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

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