repeating-linear-gradient-funktio

repeating-linear-gradient-funktio määrittää toistuvan lineaarisen gradientin. Tämä tarkoittaa, että määritämme tietyn gradienttikuvion, esimerkiksi kohdasta 0px kohtaan 10px - gradientin punaisesta siniseksi, ja tämä gradientti toistuu koko lohkon alueella: 0px - 10px, 10px - 20px, 20px - 30px ja niin edelleen.

Tätä funktiota käytetään ominaisuuksissa, jotka määrittävät taustakuvan: background, background-image tai reunakuva: border-image, background-image-source.

Syntaksi

valitsija {
	background: repeating-linear-gradient([suunta], väri1 koko1, väri2 koko2...);
}

Arvot

Arvo	Kuvaus
suunta	Määrittää gradientin suunnan millä tahansa kulmayksiköllä tai avainsanoilla `top`, `left`, `right`, `bottom` tai niiden yhdistelminä. Sanojen järjestyksellä ei ole väliä. Parametri on valinnainen: jos sitä ei kirjoiteta, gradientti kulkee ylhäältä alas. Suunnan eteen laitetaan sana `to`.
kulma	Kulma millä tahansa kulmayksiköllä. Voi olla positiivinen tai negatiivinen. Parametri on valinnainen. Samanaikaisesti voi määrittää joko kulman tai suunnan (tai ei mitään).
väri1	Gradientin alk Väri millä tahansa väriyksiköllä.
väri2	Gradientin loppuväri millä tahansa väriyksiköllä.
koko	Määrittää tietyn gradientin värin laajuuden millä tahansa kokoyksiköllä.

Esimerkki . Yksinkertaisin vaihtoehto

Gradientti näyttää tältä: kohdasta 0px kohtaan 20px puhdas punainen väri, kohdasta 20px kohtaan 40px - gradientti punaisesta siniseksi. Ja tämä toistuu ylhäältä alas (sitä se on, toistuva gradientti):

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

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

Esimerkki . Selkeät värit

Gradientti näyttää tältä: kohdasta 0px kohtaan 20px puhdas punainen väri, kohdasta 20px kohtaan 40px - puhdas sininen (juju on siinä, että toinen väri alkaa siitä, mihin ensimmäinen päättyy). Ja tämä toistuu ylhäältä alas:

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

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

Esimerkki . Vaihdetaan suuntaa

Nyt gradientin suunta on oikealta vasemmalle:

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

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

Esimerkki . Suunta asteina

Suuntana käytetään kulmaa asteina:

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

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

Esimerkki . Negatiivinen arvo

Tehdään suunnasta negatiivinen arvo:

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

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

Katso myös

funktion repeating-radial-gradient,
joka luo toistuvan radiaalisen gradientin
funktion linear-gradient,
joka luo lineaarisen gradientin
funktion radial-gradient,
joka luo radiaalisen gradientin