Funktionen repeating-linear-gradient

Funktionen repeating-linear-gradient skapar en upprepad linjär gradient. Det betyder att vi definierar ett visst gradientmönster, till exempel från 0px till 10px - en gradient från röd till blå, och denna gradient kommer att upprepas över hela blocket: 0px till 10px, från 10px till 20px, från 20px till 30px och så vidare.

Denna funktion används för egenskaper som sätter en bakgrundsbild: background, background-image eller en rambild: border-image, background-image-source.

Syntax

selektor {
	background: repeating-linear-gradient([riktning], färg1 storlek1, färg2 storlek2...);
}

Värden

Värde	Beskrivning
riktning	Anger en specifik riktning för gradienten i valfri enhet för vinklar eller med nyckelord `top`, `left`, `right`, `bottom` eller deras kombination. Ordningen på orden spelar ingen roll. Parametern är valfri: om den utelämnas kommer gradienten att gå från topp till botten. Före riktningen sätts ordet `to`.
vinkel	Vinkel i valfri enhet för vinklar. Kan vara positiv eller negativ. Parametern är valfri. Antingen kan en vinkel anges, eller en riktning (eller ingenting alls).
färg1	Startfärg för gradienten i valfri enhet för färg.
färg2	Slutfärg för gradienten i valfri enhet för färg.
storlek	Anger utsträckningen för en specifik färg i gradienten i valfri enhet för storlek.

Exempel . Enklaste varianten

Gradienten kommer att se ut så här: från 0px till 20px ren röd färg, från 20px till 40px - en gradient från röd till blå. Och detta kommer att upprepas från topp till botten (det är därför det är en upprepad gradient):

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

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

Exempel . Skarpa färger

Gradienten kommer att se ut så här: från 0px till 20px ren röd färg, från 20px till 40px - ren blå färg (kruxet är att den andra färgen börjar precis där den första slutar). Och detta kommer att upprepas från topp till botten:

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

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

Exempel . Ändra riktning

Nu kommer gradientens riktning att vara från höger till vänster:

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

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

Exempel . Riktning i grader

Som riktning anger 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;
}

Exempel . Negativt värde

Låt oss göra riktningen till ett negativt värde:

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

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

Se även

funktionen repeating-radial-gradient,
som skapar en upprepad radiell gradient
funktionen linear-gradient,
som skapar en linjär gradient
funktionen radial-gradient,
som skapar en radiell gradient