Funktionen repeating-linear-gradient

Funktionen repeating-linear-gradient definerer en gentagende lineær gradient. Det betyder, at vi definerer et bestemt gradientmønster, for eksempel fra 0px til 10px - en gradient fra rød til lyseblå, og denne gradient vil gentage sig over hele blokken: 0px til 10px, fra 10px til 20px, fra 20px til 30px og så videre.

Denne funktion anvendes til egenskaber, der definerer baggrundsbillede: background, background-image eller billede på rammen: border-image, background-image-source.

Syntaks

selektor {
	background: repeating-linear-gradient([retning], farve1 størrelse1, farve2 størrelse2...);
}

Værdier

Værdi	Beskrivelse
retning	Definerer en bestemt retning for gradienten i enhver enhed for vinkler eller med nøgleordene `top`, `left`, `right`, `bottom` eller deres kombination. Rækkefølgen af ordene er ikke vigtig. Parameteren er valgfri: hvis den ikke skrives, vil gradienten gå fra top til bund. Før retningen sættes ordet `to`.
vinkel	Vinkel i enhver enhed for vinkler. Kan være positiv eller negativ. Parameteren er valgfri. Samtidigt kan enten vinkel eller retning angives (eller ingenting).
farve1	Startfarven for gradienten i enhver enhed for farver.
farve2	Slutfarven for gradienten i enhver enhed for farver.
størrelse	Definerer udstrækningen af en bestemt farve i gradienten i enhver enhed for størrelser.

Eksempel . Den enkleste variant

Gradienten vil se sådan ud: fra 0px til 20px ren rød farve, fra 20px til 40px - gradient fra rød til lyseblå. Og sådan vil den gentage sig fra top til bund (det er jo en gentagende gradient):

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

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

Eksempel . Klare farver

Gradienten vil se sådan ud: fra 0px til 20px ren rød farve, fra 20px til 40px - ren lyseblå (pointen er, at den anden farve starter der, hvor den første slutter). Og sådan vil den gentage sig fra top til bund:

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

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

Eksempel . Ændrer retning

Nu vil gradientens retning være fra højre til venstre:

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

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

Eksempel . Retning i grader

Som retning angiver vi en vinkel i grader:

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

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

Eksempel . Negativ værdi

Lad os lave retningen med en negativ værdi:

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

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

Se også

funktionen repeating-radial-gradient,
som skaber en gentagende radial gradient
funktionen linear-gradient,
som skaber en lineær gradient
funktionen radial-gradient,
som skaber en radial gradient