repeating-linear-gradient()

Базовая поддержка Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробуйте

Длина повторяющегося градиента — это расстояние между первой и последней цветовой остановкой. Если у первой цветовой остановки нет длины, она по умолчанию равна 0. При каждом повторении позиции цветовых остановок сдвигаются на кратное длине основного линейного градиента. Таким образом, позиция каждой конечной цветовой остановки совпадает с начальной цветовой остановкой; если цветовые значения разные, это приведёт к резкому визуальному переходу. Это можно изменить, повторив первое значение цвета в качестве последнего.

Как и любой градиент, повторяющийся линейный градиент не имеет внутренних размеров; то есть, он не имеет естественного или предпочтительного размера, ни соотношения сторон. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

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

Синтаксис

/* A repeating gradient tilted 45 degrees,
   starting blue and finishing red, repeating 3 times */
repeating-linear-gradient(45deg, blue, red 33.3%)

/* A repeating gradient going from the bottom right to the top left,
   starting blue and finishing red, repeating every 20px */
repeating-linear-gradient(to left top, blue, red 20px)

/* A gradient going from the bottom to top,
   starting blue, turning green after 40%,
   and finishing red. This gradient doesn't repeat because
   the last color stop defaults to 100% */
repeating-linear-gradient(0deg, blue, green 40%, red)

/* A gradient repeating five times, going from the left to right,
   starting red, turning green, and back to red */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%)

/* Interpolation in rectangular color space */
repeating-linear-gradient(in oklab, blue, red 50px)

/* Interpolation in polar color space */
repeating-linear-gradient(in hsl, blue, red 50px)

/* Interpolation in polar color space
  with longer hue interpolation method */
repeating-linear-gradient(in hsl longer hue, blue, red 50px)

Значения

<side-or-corner>

Позиция начальной точки линии градиента. Если указана, она состоит из слова to и до двух ключевых слов: одно указывает горизонтальную сторону (left или right), а другое — вертикальную (top или bottom). Порядок ключевых слов сторон не имеет значения. Если не указано, используется значение to bottom.

Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Другие значения преобразуются в угол.

<angle>

Угол направления линии градиента. Значение 0deg эквивалентно to top; увеличение значений вращает его по часовой стрелке оттуда.

<linear-color-stop>

Значение <color> цветовой остановки, за которым следуют одна или две необязательные позиции остановки (каждая из которых является <percentage> или <length> вдоль оси градиента). Процент 0%, или длина 0, обозначает начало градиента; значение 100% составляет 100% от размера изображения, что означает, что градиент не будет повторяться.

<color-hint>

Подсказка цвета — это подсказка интерполяции, определяющая, как градиент прогрессирует между соседними цветовыми остановками. Длина определяет, в какой момент между двумя цветовыми остановками цвет градиента должен достигать середины цветового перехода. Если опущено, середина цветового перехода — середина между двумя цветовыми остановками.

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

Формальный синтаксис

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Полосы зебры

body {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    black 20px,
    black 40px
  );
  /* with multiple color stop lengths */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    black 20px 40px
  );
}

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

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

Поскольку последняя цветовая остановка составляет 10%, а градиент вертикальный, каждый градиент в повторяющемся градиенте составляет 10% от высоты, что соответствует 10 горизонтальным полосам.

Интерполяция в прямоугольном цветовом пространстве

body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}

Интерполяция с оттенком

В этом примере интерполяции используется цветовая система hsl, и интерполируется оттенок.

.shorter {
  background: repeating-linear-gradient(
    90deg in hsl shorter hue,
    red,
    blue 300px
  );
}

.longer {
  background: repeating-linear-gradient(
    90deg in hsl longer hue,
    red,
    blue 300px
  );
}

Верхняя рамка использует короткую интерполяцию, что означает, что цвет меняется от красного к синему по более короткой дуге на цветовом круге. Нижняя рамка использует длинную интерполяцию, что означает, что цвет изменяется от красного к синему по более длинной дуге, проходящей через зелёные, жёлтые и оранжевые цвета.

Примечание: Более подробные примеры см. в Использование CSS градиентов.

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

Спецификация
CSS Images Module Level 3 # повторяющиеся-градиенты

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`repeating-linear-gradient`	2610	12	16 До Firefox 36 градиенты не применялись к цветовому пространству с предварительным умножением, что приводило к неожиданному появлению оттенков серого при использовании прозрачности. 49 3.6 ["С Firefox 42, префиксную версию градиентов можно отключить, установив `layout.css.prefixes.gradients` в `false`.", "Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо."]	12.1 15 Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо. 11–15 Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо.	7 5.1 ["Safari 4 поддерживал экспериментальную `-webkit-gradient(linear,…)` функцию. Она ограничена по сравнению с более поздней стандартной версией: вы не можете указать и позицию, и угол, как в `repeating-linear-gradient()`. Эта устаревшая синтаксическая конструкция по-прежнему поддерживается для совместимости.", "Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо."]	2618	16 До Firefox 36 градиенты не применялись к цветовому пространству с предварительным умножением, что приводило к неожиданному появлению оттенков серого при использовании прозрачности. 49 4 ["С Firefox 42, префиксную версию градиентов можно отключить, установив `layout.css.prefixes.gradients` в `false`.", "Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо."]	12.1 14 Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо. 11–14 Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо.	7 5 ["Safari 4 поддерживал экспериментальную `-webkit-gradient(linear,…)` функцию. Она ограничена по сравнению с более поздней стандартной версией: вы не можете указать и позицию, и угол, как в `repeating-linear-gradient()`. Эта устаревшая синтаксическая конструкция по-прежнему поддерживается для совместимости.", "Рассматривает `<angle>` как начинающийся справа, а не сверху. То есть угол `0deg` рассматривается как индикатор направления, указывающий вправо."]	1.51.0	≤37≤37
`doubleposition`	71	79	64	58	12.1	71	64	50	12.2	10.0	71
`hue_interpolation_method`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_color_space`	111	111	127121	97	16.2	111	127	75	16.2	22.0	111
`interpolation_hints`	40	79	36	27	7	40	36	27	7	4.0	40
`to`	26	12	10	12.1	7	26	10	14	7	1.5	4.4
`unitless_0_angle`	26	12	55 46 Поддерживается только в `-webkit-repeating-linear-gradient()` и `-moz-repeating-linear-gradient()`, а не в `repeating-linear-gradient()`.	16	7	26	55 46 Поддерживается только в `-webkit-repeating-linear-gradient()` и `-moz-repeating-linear-gradient()`, а не в `repeating-linear-gradient()`.	14	7	1.5	4.4

См. также

Использование CSS-градиентов
Другие функции градиента: linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient