De functie repeating-linear-gradient

De functie repeating-linear-gradient definieert een herhalend lineair verloop. Dit betekent dat we een bepaald verlooppatroon instellen, bijvoorbeeld van 0px tot 10px - een verloop van rood naar cyaan, en dit verloop zal zich herhalen over het hele blok: 0px tot 10px, van 10px tot 20px, van 20px tot 30px, enzovoort.

Deze functie wordt toegepast op eigenschappen die een achtergrondafbeelding instellen: background, background-image of een randafbeelding: border-image, background-image-source.

Syntaxis

selector {
	background: repeating-linear-gradient([richting], kleur1 grootte1, kleur2 grootte2...);
}

Waarden

Waarde	Beschrijving
richting	Specificeert een bepaalde richting van het verloop in alle hoekeenheden of met de sleutelwoorden `top`, `left`, `right`, `bottom` of hun combinatie. De volgorde van de woorden is niet belangrijk. Deze parameter is optioneel: indien niet opgegeven, loopt het verloop van boven naar beneden. Voor de richting wordt het woord `to` geplaatst.
hoek	Een hoek in alle hoekeenheden. Kan positief of negatief zijn. Deze parameter is optioneel. Er kan tegelijkertijd een hoek of een richting worden opgegeven (of helemaal niets).
kleur1	Startkleur van het verloop in alle kleureenheden.
kleur2	Eindkleur van het verloop in alle kleureenheden.
grootte	Specificeert de omvang van een bepaalde kleur in het verloop in alle lengte-eenheden.

Voorbeeld . De eenvoudigste variant

Het verloop ziet er als volgt uit: van 0px tot 20px zuiver rood, van 20px tot 40px - een verloop van rood naar cyaan. En dit zal zich van boven naar beneden herhalen (daarom heet het een herhalend verloop):

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

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

Voorbeeld . Scherpe kleuren

Het verloop ziet er als volgt uit: van 0px tot 20px zuiver rood, van 20px tot 40px - zuiver cyaan (het punt is dat de tweede kleur begint waar de eerste eindigt). En dit zal zich van boven naar beneden herhalen:

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

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

Voorbeeld . Richting veranderen

Nu loopt de richting van het verloop van rechts naar links:

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

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

Voorbeeld . Richting in graden

We specificeren een hoek in graden als richting:

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

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

Voorbeeld . Negatieve waarde

Laten we een negatieve waarde voor de richting instellen:

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

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

Zie ook

de functie repeating-radial-gradient,
die een herhalend radiaal verloop creëert
de functie linear-gradient,
die een lineair verloop creëert
de functie radial-gradient,
die een radiaal verloop creëert