Funkce repeating-linear-gradient

Funkce repeating-linear-gradient nastavuje opakující se lineární přechod. To znamená, že nastavíme určitý vzor přechodu, například od 0px do 10px - přechod od červené k modré a tento přechod se bude opakovat na celém bloku: 0px do 10px, od 10px do 20px, od 20px do 30px a tak dále.

Tato funkce se aplikuje na vlastnosti, které nastavují obrázek pozadí: background, background-image nebo obrázek ohraničení: border-image, background-image-source.

Syntaxe

selektor {
	background: repeating-linear-gradient([směr], barva1 velikost1, barva2 velikost2...);
}

Hodnoty

Hodnota	Popis
směr	Nastavuje určitý směr přechodu v libovolných jednotkách pro úhly nebo klíčovými slovy `top`, `left`, `right`, `bottom` nebo jejich kombinací. Pořadí slov není důležité. Parametr je volitelný: pokud není napsán, přechod bude probíhat shora dolů. Před směrem se píše slovo `to`.
úhel	Úhel v libovolných jednotkách pro úhly. Může být kladný nebo záporný. Parametr je volitelný. Současně může být zadán buď úhel, nebo směr (nebo vůbec nic).
barva1	Počáteční barva přechodu v libovolných jednotkách pro barvu.
barva2	Koncová barva přechodu v libovolných jednotkách pro barvu.
velikost	Nastavuje rozsah určité barvy přechodu v libovolných jednotkách pro velikost.

Příklad . Nejjednodušší varianta

Přechod bude vypadat takto: od 0px do 20px čistá červená barva, od 20px do 40px - přechod od červené k modré. A tak se bude opakovat shora dolů (na to je opakující se přechod):

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

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

Příklad . Jasné barvy

Přechod bude vypadat takto: od 0px do 20px čistá červená barva, od 20px do 40px - čistá modrá (trik je v tom, že druhá barva začíná tam, kde končí první). A tak se bude opakovat shora dolů:

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

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

Příklad . Změníme směr

Nyní bude směr přechodu zprava doleva:

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

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

Příklad . Směr ve stupních

Jako směr nastavíme úhel ve stupních:

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

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

Příklad . Záporná hodnota

Nastavíme směr zápornou hodnotou:

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

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

Viz také

funkci repeating-radial-gradient,
která vytváří opakující se radiální přechod
funkci linear-gradient,
která vytváří lineární přechod
funkci radial-gradient,
která vytváří radiální přechod