Funktsioon repeating-linear-gradient

Funktsioon repeating-linear-gradient määrab korduva lineaarse gradendi. See tähendab, et me määrame kindla gradendi mustri, näiteks alates 0px kuni 10px - gradient punasest siniseks ja see gradient kordub kogu ploki ulatuses: 0px kuni 10px, alates 10px kuni 20px, alates 20px kuni 30px ja nii edasi.

Seda funktsiooni rakendatakse omadustele, mis määravad taustapildi: background, background-image või piiripildi: border-image, background-image-source.

Süntaks

selektor {
	background: repeating-linear-gradient([suund], värv1 suurus1, värv2 suurus2...);
}

Väärtused

Väärtus	Kirjeldus
suund	Määrab gradendi kindla suuna mis tahes nurgaühikutes või võtmesõnadega `top`, `left`, `right`, `bottom` või nende kombinatsiooniga. Sõnade järjekord ei ole oluline. Parameeter on valikuline: kui seda ei kirjutata, läheb gradient ülevalt alla. Suuna ette pannakse sõna `to`.
nurk	Nurk mis tahes nurgaühikutes. Võib olla positiivne või negatiivne. Parameeter on valikuline. Samal ajal saab määrata kas nurga või suuna (või mitte midagi).
värv1	Gradendi algvärv mis tahes värviühikutes.
värv2	Gradendi lõppvärv mis tahes värviühikutes.
suurus	Määrab gradendi kindla värvi ulatuse mis tahes suuruseühikutes.

Näide . Kõige lihtsam variant

Gradient näeb välja selline: alates 0px kuni 20px puhas punane värv, alates 20px kuni 40px - gradient punasest siniseks. Ja see kordub ülevalt alla (seda ta ongi korduv gradient):

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

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

Näide . Selged värvid

Gradient näeb välja selline: alates 0px kuni 20px puhas punane värv, alates 20px kuni 40px - puhas sinine (asi on selles, et teine värv algab seal, kus esimene lõpeb). Ja see kordub ülevalt alla:

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

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

Näide . Muudame suunda

Nüüd on gradendi suund paremalt vasakule:

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

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

Näide . Suund kraadides

Suunana määrame nurga kraadides:

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

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

Näide . Negatiivne väärtus

Teeme suuna negatiivse väärtusega:

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

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

Vaata ka

funktsiooni repeating-radial-gradient,
mis loob korduva radiaalse gradendi
funktsiooni linear-gradient,
mis loob lineaarse gradendi
funktsiooni radial-gradient,
mis loob radiaalse gradendi