A repeating-linear-gradient függvény

A repeating-linear-gradient függvény ismétlődő lineáris gradienst határoz meg. Ez azt jelenti, hogy meghatározunk egy bizonyos gradiensmintát, például 0px-tól 10px-ig - egy gradienst pirosból ciánkékbe, és ez a gradiense ismétlődni fog a teljes blokkon: 0px-tól 10px-ig, 10px-tól 20px-ig, 20px-tól 30px-ig, és így tovább.

Ezt a függvényt a háttérképet beállító tulajdonságokhoz alkalmazzuk: background, background-image vagy a szegély képét beállító tulajdonságokhoz: border-image, background-image-source.

Szintaxis

szelektor {
	background: repeating-linear-gradient([irány], szín1 méret1, szín2 méret2...);
}

Értékek

Érték	Leírás
irány	Meghatározza a gradiense irányát bármilyen szövegységben vagy kulcsszavakkal: `top`, `left`, `right`, `bottom` vagy ezek kombinációjával. A szavak sorrendje nem számít. A paraméter opcionális: ha nem írjuk be, a gradiense felülről lefelé halad. Az irány elé a `to` szót írjuk.
szög	Szög bármilyen szövegységben. Lehet pozitív vagy negatív. Opcionális paraméter. Egyszerre csak vagy szög, vagy irány adható meg (vagy egyik sem).
szín1	A gradiense kezdő színe bármilyen színegységben.
szín2	A gradiense vég színe bármilyen színegységben.
méret	Meghatározza a gradiense egy adott színének kiterjedését bármilyen mértékegységben.

Példa . A legegyszerűbb változat

A gradiense így fog kinézni: 0px-tól 20px-ig tiszta piros szín, 20px-tól 40px-ig - gradiense pirosból ciánkékbe. És ez ismétlődni fog felülről lefelé (erről szól az ismétlődő gradiense):

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

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

Példa . Éles színátmenetek

A gradiense így fog kinézni: 0px-tól 20px-ig tiszta piros szín, 20px-tól 40px-ig - tiszta ciánkék (az a trükk, hogy a második szín ott kezdődik, ahol az első befejeződik). És ez ismétlődni fog felülről lefelé:

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

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

Példa . Változtassuk meg az irányt

Most a gradiense iránya jobbról balra lesz:

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

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

Példa . Irány fokban

Irányként adjunk meg egy szöget fokban:

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

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

Példa . Negatív érték

Állítsuk be az irányt negatív értékkel:

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

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

Lásd még

a repeating-radial-gradient függvényt,
amely ismétlődő radiális gradienseket hoz létre
a linear-gradient függvényt,
amely lineáris gradienseket hoz létre
a radial-gradient függvényt,
amely radiális gradienseket hoz létre