CSS-Funktion repeating-linear-gradient()
Beispiel
Wiederholter linearer Farbverlauf:
Selbst ausprobieren »
Definition und Verwendung
Die Funktion repeating-linear-gradient() wird verwendet, um Hintergrundbilder mit wiederholtem linearem Farbverlauf zu erstellen.
Die Funktion repeating-linear-gradient() funktioniert ähnlich wie linear-gradient(), aber nachdem der angegebene Endpunkt erreicht ist, wiederholt sich das Bild.
Grundlegende Verwendung:
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
Dies erzeugt einen linearen Farbverlauf, der sich in einem 45-Grad-Winkel wiederholt. Rot beginnt, Gelb ist bei 10%, und Grün ist bei 20%, danach wiederholt er sich.
Gestreifter Hintergrund:
background: repeating-linear-gradient(90deg, blue, blue 10px, white 10px, white 20px);
Dies erzeugt einen horizontal gestreiften Hintergrund, bei dem jeder blaue und weiße Streifen 10 Pixel breit ist.
Diagonal gestreifter Hintergrund
background: repeating-linear-gradient(135deg, black, black 15px, transparent 15px, transparent 30px);
Dies erzeugt sich wiederholende schwarze und transparente diagonale Streifen in einem 135-Grad-Winkel, wobei jeder Streifen 15 Pixel breit ist.
Zebra-Streifen-Hintergrund erstellen
background: repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px);
Regenbogen-Streifen-Hintergrund
background: repeating-linear-gradient(45deg, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
Browser-Unterstützung
Die Zahl in der Tabelle gibt die erste Browserversion an, die die Funktion unterstützt.
Die mit dem Präfix "webkit", "moz" oder "o" angegebene Zahl ist die erste Versionsnummer, die mit diesem Präfix die Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS-Syntax
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Wert | Beschreibung |
|---|---|
| angle | Definiert die Winkelrichtung des Farbverlaufs. Von 0deg bis 360deg, standardmäßig 180deg. |
| side-or-corner | Gibt die Startposition des linearen Farbverlaufs an. Sie besteht aus zwei Schlüsselwörtern: Das erste gibt die horizontale Position (links oder rechts) an, und das zweite gibt die vertikale Position (oben oder unten) an. Die Reihenfolge ist beliebig, und jedes Schlüsselwort ist optional. |
| color-stop1, color-stop2,... | Gibt die Farbstopp-Punkte im Farbverlauf an. Sowohl Farbe als auch Position können angegeben werden, z. B. Farbe 50%, was bedeutet, dass sich die Farbe an der 50%-Position des Farbverlaufs befindet. |
Weitere Beispiele
Beispiel
Verschiedene sich wiederholende lineare Farbverläufe:
Selbst ausprobieren »
CSS-Tutorial:CSS3-Verläufe
Weitere Erweiterungen