Funkcija repeating-linear-gradient

Funkcija repeating-linear-gradient določa ponavljajoči se linearni gradient. To pomeni, da določimo določen vzorec gradienta, na primer, od 0px do 10px - gradient od rdeče do modre in ta gradient se bo ponavljal na celoten blok: 0px do 10px, od 10px do 20px, od 20px do 30px in tako naprej.

Ta funkcija se uporablja za lastnosti, ki določajo sliko ozadja: background, background-image ali sliko obrobe: border-image, background-image-source.

Sintaksa

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

Vrednosti

Vrednost	Opis
smer	Določa določeno smer gradienta v katerih koli enotah za kote ali s ključnimi besedami `top`, `left`, `right`, `bottom` ali njihovo kombinacijo. Vrstni red besed ni pomemben. Parameter je neobvezen: če ga ne napišemo, bo gradient šel od zgoraj navzdol. Pred smerjo postavimo besedo `to`.
kot	Kot v katerih koli enotah za kote. Lahko je pozitiven ali negativen. Parameter je neobvezen. Hkrati lahko je podan kot ali smer (ali pa ničesar).
barva1	Začetna barva gradienta v katerih koli enotah za barvo.
barva2	Končna barva gradienta v katerih koli enotah za barvo.
velikost	Določa razsežnost določene barve gradienta v katerih koli enotah za velikost.

Primer . Najenostavnejša različica

Gradient bo izgledal takole: od 0px do 20px čista rdeča barva, od 20px do 40px - gradient od rdeče do modre. In tako se bo ponavljal od zgoraj navzdol (zato je ponavljajoči se gradient):

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

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

Primer . Čiste barve

Gradient bo izgledal takole: od 0px do 20px čista rdeča barva, od 20px do 40px - čista modra barva (trik je v tem, da druga barva začne tam, kjer se konča prva). In tako se bo ponavljal od zgoraj navzdol:

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

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

Primer . Spremenimo smer

Trenutno bo smer gradienta od desne proti levi:

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

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

Primer . Smer v stopinjah

Kot smer bomo nastavili kot v stopinjah:

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

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

Primer . Negativna vrednost

Naredimo smer z negativno vrednostjo:

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

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

Glejte tudi

funkcijo repeating-radial-gradient,
ki ustvari ponavljajoči se radialni gradient
funkcijo linear-gradient,
ki ustvari linearni gradient
funkcijo radial-gradient,
ki ustvari radialni gradient