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 der Funktion linear-gradient() ähnlich und verwendet dieselben Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um den gesamten Container zu bedecken. Das Ergebnis der Funktion ist ein Objekt des <gradient> Datentyps, einer speziellen Art von <image>.

Probieren Sie es aus

background: repeating-linear-gradient(
  #e66465,
  #e66465 20px,
  #9198e5 20px,
  #9198e5 25px
);

background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);

background:
  repeating-linear-gradient(transparent, #4d9f0c 40px),
  repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Die Länge des sich wiederholenden Verlaufs ist der Abstand zwischen dem ersten und dem letzten Farbstopp. Wenn die erste Farbe keine color-stop-length hat, wird die Länge standardmäßig auf 0 gesetzt. Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Länge des grundlegenden linearen Verlaufs verschoben. Dadurch fällt die Position jedes Endfarbstopps mit einem Anfangsfarbstopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen Übergang. Dies kann geändert werden, indem die erste Farbe erneut als letzte Farbe wiederholt wird.

Wie bei jedem Verlauf hat ein wiederholender linearer Verlauf keine intrinsischen Abmessungen; d.h., er hat keine natürliche oder bevorzugte Größe oder ein bevorzugtes Verhältnis. Seine feste Größe wird der Größe des Elements entsprechen, 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 mit background-color und anderen Eigenschaften, die den <color> Datentyp 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 Anfangspunkts der Gradientenlinie. Wenn angegeben, besteht sie aus dem Wort to und bis zu zwei Schlüsselwörtern: eines für die horizontale Seite (left oder right), und das andere für die vertikale Seite (top oder bottom). Die Reihenfolge der Seitenschlüsselwörter spielt keine Rolle. Wenn nicht angegeben, wird standardmäßig to bottom verwendet.

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

<angle>

Der Winkel der Gradientenlinie. Ein Wert von 0deg entspricht to top; steigende Werte drehen sich im Uhrzeigersinn ab diesem Punkt.

<linear-color-stop>

Ein Farbeinstopp-Wert, gefolgt von einer oder zwei optionalen Stopppositionen (entweder ein <percentage> oder ein <length> entlang der Gradientenachse). Ein Prozentsatz von 0%, oder eine Länge von 0, repräsentiert den Anfang des Verlaufs; der Wert 100% entspricht 100% der Bildgröße, was bedeutet, dass der Verlauf sich nicht wiederholt.

<color-hint>

Der color-hint ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen benachbarten Farbstopps fortschreitet. Die Länge bestimmt, an welchem Punkt zwischen zwei Farbstopps der Verlauf die Mitte des Farbübergangs erreichen soll. Wenn sie weggelassen wird, ist die Mitte des Farbübergangs die Mitte 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 sich wiederholende 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, was Platz für 10 horizontale Balken bietet.

Interpolation im rechteckigen Farbraum

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

Interpolation 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
  );
}

Der obere Kasten verwendet eine kürzere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau unter Verwendung des kürzeren Bogens auf dem Farbkreis geht. Der untere Kasten verwendet eine längere Interpolation, was bedeutet, dass die Farbe von Rot nach Blau unter Verwendung des längeren Bogens geht und Grün, Gelb und Orange durchläuft.

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