Funkcja repeating-linear-gradient

Funkcja repeating-linear-gradient ustawia powtarzający się gradient liniowy. Oznacza to, że definiujemy określony wzór gradientu, na przykład od 0px do 10px - gradient od czerwonego do niebieskiego i ten gradient będzie powtarzał się na całym bloku: od 0px do 10px, od 10px do 20px, od 20px do 30px i tak dalej.

Ta funkcja jest stosowana do właściwości, które ustawiają obraz tła: background, background-image lub obraz obramowania: border-image, background-image-source.

Składnia

selektor {
	background: repeating-linear-gradient([kierunek], kolor1 rozmiar1, kolor2 rozmiar2...);
}

Wartości

Wartość	Opis
kierunek	Ustawia określony kierunek gradientu w dowolnych jednostkach kąta lub za pomocą słów kluczowych `top`, `left`, `right`, `bottom` lub ich kombinacji. Kolejność słów nie ma znaczenia. Parametr opcjonalny: jeśli nie zostanie podany, gradient będzie przebiegał od góry do dołu. Przed kierunkiem stawia się słowo `to`.
kąt	Kąt w dowolnych jednostkach kąta. Może być dodatni lub ujemny. Parametr opcjonalny. Jednocześnie można ustawić albo kąt, albo kierunek (albo nic).
kolor1	Kolor początkowy gradientu w dowolnych jednostkach koloru.
kolor2	Kolor końcowy gradientu w dowolnych jednostkach koloru.
rozmiar	Określa rozciągłość danego koloru gradientu w dowolnych jednostkach rozmiaru.

Przykład . Najprostsza wersja

Gradient będzie wyglądał tak: od 0px do 20px czysty czerwony kolor, od 20px do 40px - gradient od czerwonego do niebieskiego. I tak będzie powtarzać się od góry do dołu (po to jest powtarzający się gradient):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Przykład . Ostre kolory

Gradient będzie wyglądał tak: od 0px do 20px czysty czerwony kolor, od 20px do 40px - czysty niebieski (chwyt polega na tym, że drugi kolor zaczyna się tam, gdzie kończy się pierwszy). I tak będzie powtarzać się od góry do dołu:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Przykład . Zmiana kierunku

Teraz kierunek gradientu będzie od prawej do lewej:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Przykład . Kierunek w stopniach

Jako kierunek ustawimy kąt w stopniach:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Przykład . Wartość ujemna

Ustawmy kierunek jako wartość ujemną:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Zobacz też

funkcję repeating-radial-gradient,
która tworzy powtarzający się gradient promienisty
funkcję linear-gradient,
która tworzy gradient liniowy
funkcję radial-gradient,
która tworzy gradient promienisty