repeating-linear-gradient()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die repeating-linear-gradient()
CSS Funktion erstellt ein Bild, das aus sich wiederholenden linearen Verläufen besteht. Sie ist ähnlich wie linear-gradient()
und verwendet die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um den gesamten Container abzudecken. Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>
, der eine spezielle Art von <image>
ist.
Probieren Sie es aus
Die Länge des sich wiederholenden Verlaufs ist der Abstand zwischen dem ersten und dem letzten Farbstopp. Wenn die erste Farbe keine Farbstopp-Länge hat, beträgt die Standardlänge des Farbstopps 0. Mit jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Länge des grundlegenden linearen Verlaufs verschoben. Somit fällt die Position jedes endenden Farbstopps mit einem startenden Farbstopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang. Dies kann geändert werden, indem die erste Farbe als letzte Farbe wiederholt wird.
Wie bei jedem Verlauf hat auch ein sich wiederholender linearer Verlauf keine intrinsischen Dimensionen; das heißt, er hat keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, auf das er angewendet wird.
Da <gradient>
s zum <image>
Datentyp gehören, können sie nur dort verwendet werden, wo <image>
s verwendet werden können. Aus diesem Grund funktioniert repeating-linear-gradient()
nicht bei background-color
und anderen Eigenschaften, die den Datentyp <color>
verwenden.
Syntax
/* A repeating gradient tilted 45 degrees,
starting blue and finishing red, repeating 3 times */
repeating-linear-gradient(45deg, blue, red 33.3%)
/* A repeating gradient going from the bottom right to the top left,
starting blue and finishing red, repeating every 20px */
repeating-linear-gradient(to left top, blue, red 20px)
/* A gradient going from the bottom to top,
starting blue, turning green after 40%,
and finishing red. This gradient doesn't repeat because
the last color stop defaults to 100% */
repeating-linear-gradient(0deg, blue, green 40%, red)
/* A gradient repeating five times, going from the left to right,
starting red, turning green, and back to red */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%)
/* Interpolation in rectangular color space */
repeating-linear-gradient(in oklab, blue, red 50px)
/* Interpolation in polar color space */
repeating-linear-gradient(in hsl, blue, red 50px)
/* Interpolation in polar color space
with longer hue interpolation method */
repeating-linear-gradient(in hsl longer hue, blue, red 50px)
Werte
<side-or-corner>
-
Die Position des Ausgangspunkts der Verlaufsachse. Falls angegeben, besteht er aus dem Wort
to
und bis zu zwei Schlüsselwörtern: eines zeigt die horizontale Seite (left
oderright
), und das andere die vertikale Seite (top
oderbottom
) an. Die Reihenfolge der Seiten-Schlüsselwörter spielt keine Rolle. Falls nicht angegeben, ist die Standardeinstellungto bottom
.Die Werte
to top
,to bottom
,to left
undto right
entsprechen den Winkeln0deg
,180deg
,270deg
und90deg
beziehungsweise. Die anderen Werte werden in einen Winkel übersetzt. <angle>
-
Der Winkel der Verlaufsachse. Ein Wert von
0deg
entsprichtto top
; zunehmende Werte rotieren im Uhrzeigersinn von dort aus. <linear-color-stop>
-
Der
<color>
Wert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (entweder ein<percentage>
oder ein<length>
entlang der Verlaufsachse). Ein Prozentsatz von0%
oder eine Länge von0
repräsentiert den Beginn des Verlaufs; der Wert100%
ist 100% der Bildgröße, was bedeutet, dass der Verlauf nicht wiederholt wird. <color-hint>
-
Der color-hint ist ein Interpolationshinweis, der definiert, wie der Farbverlauf zwischen angrenzenden Farbstopps voranschreitet. Die Länge legt fest, an welchem Punkt zwischen zwei Farbstopps die Verlaufsfarbe den Mittelpunkt des Farbübergangs erreichen soll. Wenn sie weggelassen wird, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstopps.
Hinweis: Die Darstellung von Farbstopps in sich wiederholenden linearen Verläufen folgt denselben Regeln wie Farbstopps in linearen Verläufen.
Formale Syntax
<repeating-linear-gradient()> =
repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<linear-gradient-syntax> =
[ <angle> | to <side-or-corner> ]? , <color-stop-list>
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?
<linear-color-stop> =
<color> <length-percentage>?
<linear-color-hint> =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Beispiele
Zebramuster
body {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
black 20px,
black 40px
);
/* with multiple color stop lengths */
background-image: repeating-linear-gradient(
-45deg,
transparent 0 20px,
black 20px 40px
);
}
Zehn sich wiederholende horizontale Balken
body {
background-image: repeating-linear-gradient(
to bottom,
rgb(26 198 204),
rgb(26 198 204) 7%,
rgb(100 100 100) 10%
);
}
Da der letzte Farbstopp bei 10% liegt und der Verlauf vertikal ist, ist jeder Verlauf im wiederholten Verlauf 10% der Höhe und passt in 10 horizontale Balken.
Interpolation im rechteckigen Farbraum
body {
background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}
Interpolation mit Farbton (Hue)
In diesem Beispiel zur Interpolation wird das hsl Farbsystem verwendet, und der Farbton wird interpoliert.
.shorter {
background: repeating-linear-gradient(
90deg in hsl shorter hue,
red,
blue 300px
);
}
.longer {
background: repeating-linear-gradient(
90deg in hsl longer hue,
red,
blue 300px
);
}
Das obere Kästchen verwendet die kürzere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau über den kürzeren Bogen auf dem Farbkreis geht. Das untere Kästchen verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau über den längeren Bogen geht und durch Grün, Gelb und Orange verläuft.
Hinweis: Für weitere Beispiele siehe Verwendung von CSS-Verläufen.
Spezifikationen
Specification |
---|
CSS Images Module Level 3 # repeating-gradients |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
repeating-linear-gradient() | ||||||||||||
Double-position color stops | ||||||||||||
Hue interpolation method | ||||||||||||
Interpolation color space | ||||||||||||
Interpolation Hints / Gradient Midpoints | ||||||||||||
to keyword | ||||||||||||
Unitless 0 for <angle> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.