Funkcija repeating-linear-gradient

Funkcija repeating-linear-gradient definē atkārtojošu lineāru gradientu. Tas nozīmē, ka mēs definējam noteiktu gradienta rakstu, piemēram, no 0px līdz 10px - gradients no sarkanas uz gaiši zilu un šis gradients tiks atkārtots visā blokā: 0px līdz 10px, no 10px līdz 20px, no 20px līdz 30px un tā tālāk.

Šī funkcija tiek lietota īpašībām, kuras definē fona attēlu: background, background-image vai robežas attēlu: border-image, background-image-source.

Sintakse

selektors {
	background: repeating-linear-gradient([virziens], krāsa1 izmērs1, krāsa2 izmērs2...);
}

Vērtības

Vērtība	Apraksts
virziens	Definē noteiktu gradienta virzienu jebkuros leņķa mērvienībos vai ar atslēgvārdiem `top`, `left`, `right`, `bottom` vai to kombinācijām. Vārdu secībai nav nozīmes. Parametrs nav obligāts: ja to neraksta, gradients virzīsies no augšas uz leju. Pirms virziena tiek likts vārds `to`.
leņķis	Leņķis jebkuros leņķa mērvienībos. Var būt pozitīvs vai negatīvs. Parametrs nav obligāts. Vienlaikus var tikt definēts vai nu leņķis, vai virziens (vai nekas).
krāsa1	Sākuma gradienta krāsa jebkuros krāsas mērvienībos.
krāsa2	Beigu gradienta krāsa jebkuros krāsas mērvienībos.
izmērs	Definē noteiktas gradienta krāsas izmēru jebkuros izmēra mērvienībos.

Piemērs . Vienkāršākais variants

Gradients izskatīsies šādi: no 0px līdz 20px tīri sarkana krāsa, no 20px līdz 40px - gradients no sarkanas uz gaiši zilu. Un tas tiks atkārtots no augšas uz leju (tas ir atkārtojošs gradients):

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

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

Piemērs . Noteiktas krāsas

Gradients izskatīsies šādi: no 0px līdz 20px tīri sarkana krāsa, no 20px līdz 40px - tīri gaiši zila (mērķis ir tas, ka otrā krāsa sākas tur, kur beidzas pirmā). Un tas tiks atkārtots no augšas uz leju:

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

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

Piemērs . Mainīsim virzienu

Tagad gradienta virziens būs no labās uz kreiso pusi:

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

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

Piemērs . Virziens grādos

Kā virzienu definēsim leņķi grādos:

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

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

Piemērs . Negatīva vērtība

Izveidosim virzienu ar negatīvu vērtību:

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

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

Skatiet arī

funkciju repeating-radial-gradient,
kas veido atkārtojošu radiālu gradientu
funkciju linear-gradient,
kas veido lineāru gradientu
funkciju radial-gradient,
kas veido radiālu gradientu