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 ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die repeating-linear-gradient() CSS Funktion erzeugt ein Bild, das aus sich wiederholenden linearen Verläufen besteht. Sie ist ähnlich wie linear-gradient() und nimmt die gleichen Argumente an, wobei die Farbverläufe jedoch unendlich in alle Richtungen wiederholt werden, um den gesamten Container abzudecken. Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, das eine besondere Art von <image> ist.

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 Gradienten ist der Abstand zwischen dem ersten und dem letzten Farbverlaufspunkt. Wenn die erste Farbe keine Farbverlaufs-Länge hat, beträgt die Standard-Farbverlaufs-Länge 0. Mit jeder Wiederholung werden die Positionen der Farbverläufe um ein Vielfaches der Länge des Grundlinien-Gradienten verschoben. Dadurch fällt die Position jedes endenden Farbverlaufs mit einem startenden Farbverlauf zusammen; wenn die Farbwerte unterschiedlich sind, ergibt das einen scharfen visuellen Übergang. Dies kann mit der Wiederholung der ersten Farbe als letzte Farbe geändert werden.

Wie bei jedem Verlauf hat 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 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 bei 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 Startpunkts der Gradientenlinie. Wenn angegeben, besteht es aus dem Wort to und bis zu zwei Schlüsselwörtern: eines zeigt die horizontale Seite an (left oder right), das andere die vertikale Seite (top oder bottom). Die Reihenfolge der Seiten-Schlüsselwörter spielt keine Rolle. Wenn nicht angegeben, lautet die Standardvorgabe to bottom.

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

<angle>

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

<linear-color-stop>

Ein Farbverlaufspunkt mit einem <color>-Wert, gefolgt von einer oder zwei optionalen Stopp-Positionen (jeweils entweder ein <percentage> oder ein <length> entlang der Achse des Gradienten). Ein Prozentwert von 0% oder eine Länge von 0 repräsentiert den Anfang des Gradienten; der Wert 100% entspricht 100% der Bildgröße, bedeutet, dass der Gradient nicht wiederholt wird.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen benachbarten Farbverlaufspunkten verläuft. Die Länge definiert, an welchem Punkt zwischen zwei Farbverlaufspunkten die Verlauffarbe den Mittelpunkt des Farbübergangs erreicht. Wird dieser weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farbverlaufspunkten.

Hinweis: Die Darstellung von Farbverläufen in sich wiederholenden linearen Gradienten folgt denselben Regeln wie Farbverläufe in linearen Gradienten.

Formale Syntax

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | <zero> | 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

body {
  width: 100vw;
  height: 100vh;
}

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

body {
  width: 100vw;
  height: 100vh;
}

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 Farbverlaufspunkt bei 10% liegt und der Gradient vertikal ist, passt jeder Gradient im wiederholten Verlauf zu 10% der Höhe, was 10 horizontale Balken ergibt.

Interpolation im rechteckigen Farbraum

body {
  width: 100vw;
  height: 100vh;
}

css

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

Interpolation mit Farbton

<div class="shorter">shorter hue</div>
<div class="longer">longer hue</div>

div {
  height: 50vh;
  color: #333300;
  font-weight: bolder;
  padding-left: 1.5rem;
}

In diesem Interpolationsbeispiel wird das hsl-Farbsystem verwendet und der Farbton 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
  );
}

Die obere Box nutzt die kürzere Interpolation, wobei die Farbe von Rot zu Blau unter Verwendung des kürzeren Bogens auf dem Farbkreis wechselt. Die untere Box verwendet die längere Interpolation, wobei die Farbe von Rot zu Blau wechselt, indem der längere Bogen durch Grüntöne, Gelb und Orange durchlaufen wird.

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

Spezifikationen

Specification
CSS Images Module Level 3 # repeating-gradients

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Verläufen
Andere Verlaufsfunktionen: linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()
<hue-interpolation-method>
<color-interpolation-method>
<image>
image()
element()
image-set()
cross-fade()

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden