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. |
Совместимость с браузерами
BCD tables only load in the browser
Дополнительно
- Using CSS gradients
- Другие функции градиентов:
linear-gradient
,radial-gradient
,repeating-radial-gradient