repeating-radial-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-radial-gradient() CSS Funktion erzeugt ein Bild, das aus sich wiederholenden Verläufen besteht, die von einem Ursprung ausstrahlen. Sie ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente an, wiederholt jedoch die Farbunterbrechungen unendlich in alle Richtungen, um ihren gesamten Container abzudecken, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des <gradient> Datentyps, der eine spezielle Art von <image> ist.

Probieren Sie es aus

Mit jeder Wiederholung werden die Positionen der Farbunterbrechungen um ein Vielfaches der Maße des grundlegenden radialen Verlaufs verschoben (der Abstand zwischen der letzten und der ersten Farbunterbrechung). Somit fällt die Position jeder endenden Farbunterbrechung mit einer startenden Farbunterbrechung zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang, der abgeschwächt werden kann, indem die erste Farbe als letzte Farbe wiederholt wird.

Wie bei jedem Verlauf hat ein sich wiederholender radialer Verlauf keine intrinsischen Dimensionen; d.h., er hat keine natürliche oder bevorzugte Größe und kein 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-radial-gradient() nicht bei background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Syntax

css

/* A gradient at the center of its container,
   starting red, changing to blue, and finishing green,
   with the colors repeating every 30px */
repeating-radial-gradient(circle at center, red 0, blue, green 30px)

/* An elliptical gradient near the top left of its container,
   starting red, changing to green and back again,
   repeating five times between the center and the bottom right corner,
   and only once between the center and the top left corner */
repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%)

Werte

<position>

Die Position des Verlaufs, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<shape>

Die Form des Verlaufs. Der Wert kann circle (was bedeutet, dass die Form des Verlaufs ein Kreis mit konstantem Radius ist) oder ellipse (was bedeutet, dass die Form eine achsenausgerichtete Ellipse ist) sein. Wenn nicht angegeben, ist der Standardwert ellipse.

<extent-keyword>

Ein Schlüsselwort, das beschreibt, wie groß die endende Form sein muss. Die möglichen Werte sind:

Schlüsselwort	Beschreibung
`closest-side`	Die endende Form des Verlaufs trifft auf die dem Zentrum am nächsten liegende Seite der Box (für Kreise) oder trifft auf beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten liegen (für Ellipsen).
`closest-corner`	Die endende Form des Verlaufs wird so bemessen, dass sie genau die dem Zentrum am nächsten liegende Ecke der Box trifft.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die endende Form so bemessen wird, dass sie die dem Zentrum am weitesten entfernte Seite der Box (oder vertikale und horizontale Seiten) trifft.
`farthest-corner`	Die endende Form des Verlaufs wird so bemessen, dass sie genau die dem Zentrum am weitesten entfernte Ecke der Box trifft.

Hinweis: Frühe Implementierungen dieser Funktion beinhalteten andere Schlüsselwörter (cover und contain) als Synonyme für die Standardwerte farthest-corner und closest-side. Verwenden Sie nur die Standard-Schlüsselwörter, da einige Implementierungen diese älteren Varianten bereits entfernt haben.

<color-stop>

Ein Farbunterbrechungswert des <color>, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder eine <length> entlang der Axis des Verlaufs). Ein Prozentsatz von 0% oder eine Länge von 0 repräsentiert das Zentrum des Verlaufs; der Wert 100% repräsentiert den Schnittpunkt der endenden Form mit dem virtuellen Verlaufsstrahl. Prozentsätze dazwischen sind linear auf dem virtuellen Verlaufsstrahl positioniert.

Formale Syntax

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

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>

Beispiele

Schwarz-Weiß-Verlauf

<div class="radial-gradient"></div>

.radial-gradient {
  width: 120px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

Farthest-corner

<div class="radial-gradient"></div>

.radial-gradient {
  width: 240px;
  height: 120px;
}

css

.radial-gradient {
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red,
    black 5%,
    blue 5%,
    green 10%
  );
  background: repeating-radial-gradient(
    ellipse farthest-corner at 20% 20%,
    red 0 5%,
    green 5% 10%
  );
}

Der elliptische Verlauf wird 20% von der oberen linken Ecke zentriert und wiederholt sich 10 Mal zwischen dem Zentrum und der entferntesten Ecke (der unteren rechten Ecke). Browser, die mehrfache Positionen für Farbunterbrechungen unterstützen, zeigen eine rot und grün gestreifte Ellipse an. Browser, die die Syntax noch nicht unterstützen, sehen einen Verlauf, der von rot zu schwarz und dann von blau zu grün übergeht.

Interpolation mit Farbton

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

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

In diesem Beispiel für Interpolation wird das HSL Farbsystem verwendet und der Farbton wird interpoliert.

css

.shorter {
  background-image: repeating-radial-gradient(
    circle at center in hsl shorter hue,
    red 30px,
    blue 60px
  );
}

.longer {
  background-image: repeating-radial-gradient(
    circle at center in hsl longer hue,
    red 30px,
    blue 60px
  );
}

Das linke Feld verwendet kürzere Interpolation, was bedeutet, dass die Farbe von rot nach blau über den kürzeren Bogen auf dem Farbkreis geht. Das rechte Feld verwendet längere Interpolation, was bedeutet, dass die Farbe von rot nach blau über den längeren Bogen geht und dabei durch Grün, Gelb und Orange verlä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

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