User Avatar

Функция repeating-linear-gradient()

Описание

Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gradient() и имеет те же параметры. При этом цвета последовательно сменяют друг друга, после последнего цвета в списке цветов градиента сразу же идёт первый.

Синтаксис

background-image: repeating-linear-gradient(угол | to позиция, цвет);

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

Значение Описание
угол Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке.
цвет Представляет собой значение цвета, за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
позиция Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. приведены разные позиции и тип получаемого градиента для цветов #fff и #000, по другому от белого к чёрному.
Позиция Угол Описание Вид
to top 0deg Снизу вверх.
to left 270deg
-90deg		 Справа налево.
to bottom 180deg Сверху вниз.
to right 90deg
-270deg		 Слева направо.
to top left От правого нижнего угла к левому верхнему.
to top right От левого нижнего угла к правому верхнему.
to bottom left От правого верхнего угла к левому нижнему.
to bottom right От левого верхнего угла к правому нижнему.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#test {
width: 200px;
height: 100px;
background: repeating-linear-gradient(-45deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
}
</style>
<div id='test'></div>
</body>
</html>

Читайте также

Свойство padding-inline-end

Устанавливает расстояние от внутреннего края рамки элемента до воображаемого прямоугольника по строчной оси....

Свойство padding-bottom

Устанавливает расстояние от внутреннего нижнего края рамки элемента до воображаемого прямоугольника....

Свойство float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон....

Правило @charset

Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национал...