Функция repeating-linear-gradient
Функцията repeating-linear-gradient
задава повтарящ се линеен градиент. Това
означава, че задаваме определен градиентен модел,
например, от 0px до 10px - градиент
от червено към синьо и този градиент ще се
повтаря върху целия блок: 0px до 10px,
от 10px до 20px, от 20px
до 30px и така нататък.
Тази функция се прилага към свойства, които
задават фонови изображения: background,
background-image
или изображения за граница: border-image,
background-image-source.
Синтаксис
селектор {
background: repeating-linear-gradient([посока], цвят1 размер1, цвят2 размер2...);
}
Стойности
| Стойност | Описание |
|---|---|
| посока |
Задава определена посока на градиента във всякакви мерни единици за ъгли
или с ключови думи
top, left, right, bottom
или техните комбинации.
Редът на думите няма значение. Параметърът не е задължителен:
ако не бъде написан, градиентът ще върви отгоре надолу.
Преди посоката се поставя думата to.
|
| ъгъл | Ъгъл във всякакви мерни единици за ъгли. Може да бъде положителен или отрицателен. Параметърът не е задължителен. Едновременно може да бъде зададен или ъгъл, или посока (или нищо). |
| цвят1 | Начален цвят на градиента във всякакви мерни единици за цвят. |
| цвят2 | Краен цвят на градиента във всякакви мерни единици за цвят. |
| размер | Задава обхвата на определен цвят от градиента във всякакви мерни единици за размер. |
Пример . Най-простият вариант
Градиентът ще изглежда така: от 0px
до 20px чист червен цвят, от 20px
до 40px - градиент от червено към синьо.
И така ще се повтаря отгоре надолу (затова
е повтарящ се градиент):
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Ясни цветове
Градиентът ще изглежда така: от 0px
до 20px чист червен цвят, от 20px
до 40px - чист син цвят (хитростта е, че
вторият цвят започва там, където завършва
първият). И така ще се повтаря отгоре надолу:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Промяна на посоката
Сега посоката на градиента ще бъде от дясно наляво:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
width: 400px;
height: 200px;
}
:
Пример . Посока в градуси
Като посока задаваме ъгъл в градуси:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Пример . Отрицателна стойност
Задаваме посока с отрицателна стойност:
<div id="elem"></div>
#elem {
background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
width: 400px;
height: 200px;
}
:
Вижте също
-
функцията
repeating-radial-gradient,
която създава повтарящ се радиален градиент -
функцията
linear-gradient,
която създава линеен градиент -
функцията
radial-gradient,
която създава радиален градиент