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 wiederholten Gradienten besteht, die von einem Ursprung ausstrahlen. Sie ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um ihren gesamten Container zu bedecken, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des <gradient> Datentyps, welcher eine spezielle Art von <image> ist.

Probieren Sie es aus

Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Dimensionen des grundlegenden radialen Gradienten (die Entfernung zwischen dem letzten Farbstopp und dem ersten) verschoben. Dadurch 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, der gemildert werden kann, indem die erste Farbe als letzte wiederholt wird.

Wie jeder Gradient hat auch ein wiederholter radialer Gradient keine intrinsischen Dimensionen; d. h., 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-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 Gradienten, interpretiert auf die gleiche Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<shape>

Die Form des Gradienten. Der Wert kann circle (was bedeutet, dass die Form des Gradienten ein Kreis mit konstantem Radius ist) oder ellipse (was bedeutet, dass die Form eine achsenparallel ausgerichtete Ellipse ist) sein. Wenn nicht angegeben, lautet 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 Gradienten erreicht die Seite der Box, die am nächsten zu ihrem Zentrum liegt (für Kreise) oder erreicht sowohl die vertikalen als auch die horizontalen Seiten, die am nächsten zum Zentrum liegen (für Ellipsen).
`closest-corner`	Die endende Form des Gradienten wird so dimensioniert, dass sie genau die am nächsten gelegene Ecke der Box von ihrem Zentrum aus erreicht.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die endende Form so dimensioniert ist, dass sie die Seite der Box erreicht, die am weitesten von ihrem Zentrum entfernt ist (oder vertikale und horizontale Seiten).
`farthest-corner`	Die endende Form des Gradienten wird so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum aus erreicht.

Hinweis: Frühe Implementierungen dieser Funktion enthielten 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 <color> Wert eines Farbstopps, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder eine <length> entlang der Gradientenachse). Ein Prozentsatz von 0% oder eine Länge von 0 repräsentiert das Zentrum des Gradienten; der Wert 100% repräsentiert den Schnittpunkt der endenden Form mit dem virtuellen Gradientenstrahl. Prozentuale Werte dazwischen sind linear auf dem virtuellen Gradientenstrahl 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ß-Gradient

<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 Gradient wird zu 20% von oben links zentriert und wiederholt sich 10 Mal zwischen dem Zentrum und der am weitesten entfernten Ecke (der unteren rechten Ecke). Browser, die Farbstopps mit mehreren Positionen unterstützen, zeigen eine rot und grün gestreifte Ellipse an. Browser, die die Syntax noch nicht unterstützen, sehen einen Gradient, der von rot zu schwarz und dann von blau zu grün wechselt.

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 Interpolationsbeispiel wird das hsl Farbsystem verwendet, und der hue 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
  );
}

Die Box links verwendet die kurze Interpolation, was bedeutet, dass die Farbe von rot zu blau über den kürzeren Bogen am Farbkreis geht. Die Box rechts verwendet die lange Interpolation, was bedeutet, dass die Farbe von rot zu blau über den längeren Bogen geht, durch Grün, Gelb und Orange.

Hinweis: Bitte schauen Sie sich Using CSS gradients für weitere Beispiele an.

Spezifikationen

Specification
CSS Images Module Level 3 # repeating-gradients

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Using CSS gradients
Andere Gradient-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()