Funktion repeating-linear-gradient

Die Funktion repeating-linear-gradient definiert einen sich wiederholenden linearen Verlauf. Das bedeutet, dass wir ein bestimmtes Verlaufsmuster festlegen, zum Beispiel von 0px bis 10px - ein Verlauf von Rot zu Blau, und dieser Verlauf wird sich über den gesamten Block wiederholen: 0px bis 10px, von 10px bis 20px, von 20px bis 30px und so weiter.

Diese Funktion wird auf Eigenschaften angewendet, die ein Hintergrundbild definieren: background, background-image oder ein Rahmenbild: border-image, background-image-source.

Syntax

Selektor {
	background: repeating-linear-gradient([Richtung], Farbe1 Größe1, Farbe2 Größe2...);
}

Werte

Wert	Beschreibung
Richtung	Definiert eine bestimmte Richtung des Verlaufs in beliebigen Winkeleinheiten oder mit den Schlüsselwörtern `top`, `left`, `right`, `bottom` oder deren Kombination. Die Reihenfolge der Wörter spielt keine Rolle. Der Parameter ist optional: wenn er nicht angegeben wird, verläuft der Gradient von oben nach unten. Der Richtung wird das Wort `to` vorangestellt.
Winkel	Ein Winkel in beliebigen Winkeleinheiten. Kann positiv oder negativ sein. Der Parameter ist optional. Es kann gleichzeitig entweder ein Winkel oder eine Richtung angegeben werden (oder gar nichts).
Farbe1	Startfarbe des Verlaufs in beliebigen FarbEinheiten.
Farbe2	Endfarbe des Verlaufs in beliebigen FarbEinheiten.
Größe	Definiert die Ausdehnung einer bestimmten Farbe im Verlauf in beliebigen Größeneinheiten.

Beispiel . Die einfachste Variante

Der Verlauf sieht folgendermaßen aus: von 0px bis 20px reines Rot, von 20px bis 40px - ein Verlauf von Rot zu Blau. Und so wiederholt er sich von oben nach unten (dafür ist der sich wiederholende Verlauf da):

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

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

Beispiel . Klare Farben

Der Verlauf sieht folgendermaßen aus: von 0px bis 20px reines Rot, von 20px bis 40px - reines Blau (der Trick besteht darin, dass die zweite Farbe dort beginnt, wo die erste endet). Und so wiederholt er sich von oben nach unten:

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

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

Beispiel . Richtung ändern

Jetzt verläuft der Gradient von rechts nach links:

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

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

Beispiel . Richtung in Grad

Als Richtung geben wir einen Winkel in Grad an:

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

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

Beispiel . Negativer Wert

Lassen Sie uns die Richtung mit einem negativen Wert festlegen:

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

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

Siehe auch

die Funktion repeating-radial-gradient,
die einen sich wiederholenden radialen Verlauf erzeugt
die Funktion linear-gradient,
die einen linearen Verlauf erzeugt
die Funktion radial-gradient,
die einen radialen Verlauf erzeugt