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.

Die repeating-linear-gradient() CSS Funktion erzeugt ein Bild, das aus wiederholten linearen Verläufen besteht. Sie ist ähnlich zu linear-gradient() und nimmt die gleichen Argumente an, jedoch wiederholt sie die Farbstopps unendlich in allen Richtungen, um ihren gesamten Container abzudecken. Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, eine spezielle Art von <image>.

Probieren Sie es aus

Die Länge des wiederholten Verlaufs ist der Abstand zwischen dem ersten und letzten Farbstop. Wenn die erste Farbe keine Farbstopp-Länge hat, beträgt die Farbstopp-Länge standardmäßig 0. Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Länge des grundlegenden linearen Verlaufs verschoben. So 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 durch erneutes Wiederholen der ersten Farbe als letzte Farbe geändert werden.

Wie bei jedem Verlauf hat ein wiederholter 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> zur <image>-Datenart gehört, können sie nur dort verwendet werden, wo <image> verwendet werden kann. Aus diesem Grund funktioniert repeating-linear-gradient() nicht bei background-color und anderen Eigenschaften, die den Datentyp <color> verwenden.

Syntax

css
/* 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 Startpunkts der Gradientenlinie. Wenn angegeben, besteht er aus dem Wort to und bis zu zwei Schlüsselwörtern: eines zeigt die horizontale Seite (left oder right) an, das andere die vertikale Seite (top oder bottom). Die Reihenfolge der Seitenschlüsselwörter spielt keine Rolle. Wenn nicht angegeben, ist der Standardwert to bottom.

Die Werte to top, to bottom, to left und to right entsprechen den Winkeln 0deg, 180deg, 270deg bzw. 90deg. Andere Werte werden in einen Winkel übersetzt.

<angle>

Der Winkel der Gradientenlinie. Ein Wert von 0deg entspricht to top; zunehmende Werte rotieren von dort im Uhrzeigersinn.

<linear-color-stop>

Ein Farbstop-Wert, <color>, gefolgt von einer oder zwei optionalen Stopp-Positionen, (jede entweder eine <percentage> oder eine <length> entlang der Gradientenachse). Ein Prozentsatz von 0%, oder eine Länge von 0, repräsentiert den Beginn des Verlaufs; der Wert 100% ist 100% der Bildgröße, was bedeutet, dass der Verlauf sich nicht wiederholt.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen angrenzenden Farbstopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlaufsfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wenn weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbstopps.

Hinweis: Die Darstellung von Farbstopps in 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

Zebrastreifen

css
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 wiederholte horizontale Balken

css
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, wobei 10 horizontale Balken passen.

Interpolation im rechteckigen Farbraum

css
body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}

Interpolieren mit Farbton

In diesem Interpolationsbeispiel wird das hsl Farbsystem verwendet, und der Farbton wird interpoliert.

css
.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 Feld verwendet kürzere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau über den kürzeren Bogen auf dem Farbkreis verläuft. Das untere Feld verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau über den längeren Bogen verläuft und durch Grün, Gelb und Orange zieht.

Hinweis: Bitte sehen Sie Verwendung von CSS-Verläufen für weitere Beispiele.

Spezifikationen

Specification
CSS Images Module Level 3
# repeating-gradients

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch