repeating-linear-gradient()

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 Farbstopp-Länge hat, beträgt die Standard-Farbstopp-Länge 0. Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Länge des grundlegenden linearen Verlaufs verschoben. So fällt jede endende Farbstopp-Position mit einer startenden Farbstopp-Position zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang. Dies kann verändert werden, indem die erste Farbe erneut als letzte Farbe wiederholt wird.

Wie bei jedem Verlauf hat ein sich wiederholender linearer Verlauf keine intrinsischen Dimensionen; d.h. er hat keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhä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. Daher funktioniert repeating-linear-gradient() nicht bei background-color und anderen Eigenschaften, die den <color> Datentyp 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 Startpunkts der Verlaufslinie. Wenn angegeben, besteht sie aus dem Wort to und bis zu zwei Schlüsselwörtern: eines gibt 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, ist der Standardwert to bottom.

Die Werte to top, to bottom, to left und to right sind äquivalent zu den Winkeln 0deg, 180deg, 270deg und 90deg entsprechend. Die anderen Werte werden in einen Winkel übersetzt.

<angle>

Der Winkel der Richtung der Verlaufslinie. Ein Wert von 0deg entspricht to top; steigende Werte drehen sich im Uhrzeigersinn von dort aus.

<linear-color-stop>

Der Farbwert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen (jeweils entweder ein <percentage> oder eine <length> entlang der Verlaufsachse). Ein Prozentsatz von 0% oder eine Länge von 0 stellt den Beginn des Verlaufs dar; der Wert 100% entspricht 100% der Bildgröße, was bedeutet, dass der Verlauf nicht wiederholt wird.

<color-hint>

Der Farbhinweis ist ein Interpolationshinweis, der definiert, wie der Verlauf zwischen benachbarten Farbstopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlauffarbe die Mitte des Farbübergangs erreicht. Wenn weggelassen, ist die Mitte des Farbübergangs die Mitte zwischen zwei Farbstopps.

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

Zebra-Streifen

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

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

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 10% beträgt und der Verlauf vertikal ist, hat jeder Verlauf im wiederholten Verlauf 10% der Höhe, was 10 horizontale Balken ergibt.

Interpolation im rechteckigen Farbraum

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

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

Interpolieren des Farbtons

<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 Beispiel zur Interpolation wird das hsl Farbsystem verwendet und der Farbton 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 Feld verwendet die kürzere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis wechselt. Das untere Feld verwendet die längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen wechselt und dabei durch Grün, Gelb und Orange verläuft.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwenden von CSS-Verläufen
• Andere Verlauf-Funktionen: 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()