99 of 313 menu

Функция 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,
    която създава радиален градиент
Български
AfrikaansAzərbaycanবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Ние използваме бисквитки за работата на сайта, анализ и персонализация. Обработката на данни се извършва в съответствие с Политика за поверителност.
приемам всички настройки отхвърляне