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

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

Die repeating-radial-gradient() CSS Funktion erzeugt ein Bild, das aus sich wiederholenden Gradienten besteht, die von einem Ursprung aus strahlen. Sie ähnelt der radial-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farb-Stopps in alle Richtungen unendlich, um ihren gesamten Container zu bedecken, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, der eine besondere Art von <image> ist.

Probieren Sie es aus

background: repeating-radial-gradient(#e66465, #9198e5 20%);

background: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

background: repeating-radial-gradient(
  circle at 100%,
  #333333,
  #333333 10px,
  #eeeeee 10px,
  #eeeeee 20px
);

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

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

Bei jeder Wiederholung werden die Positionen der Farb-Stopps um ein Vielfaches der Grunddimensionen des radialen Gradienten verschoben (der Abstand zwischen dem letzten Farb-Stopp und dem ersten). Daher fällt die Position jedes endenden Farb-Stopps mit einem startenden Farb-Stopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem deutlichen visuellen Übergang, der abgemildert werden kann, indem die erste Farbe als letzte Farbe wiederholt wird.

Wie bei jedem Gradienten hat ein sich wiederholender radialer Gradient keine intrinsischen Dimensionen; das heißt, 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 Datentyp <image> 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 Datentyp <color> 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 wie background-position oder transform-origin. Wenn nicht angegeben, ist der Standardwert center.

<shape>

Die Form des Gradienten. Der Wert kann circle (bedeutet, dass die Form des Gradienten ein Kreis mit konstantem Radius ist) oder ellipse (bedeutet, dass die Form eine achsenparallele 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 Gradienten trifft die Seite der Box, die dem Zentrum am nächsten ist (bei Kreisen) oder trifft sowohl die vertikalen als auch die horizontalen Seiten, die dem Zentrum am nächsten sind (bei Ellipsen).
`closest-corner`	Die endende Form des Gradienten ist so dimensioniert, dass sie genau die nächste Ecke der Box von ihrem Zentrum aus erreicht.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die endende Form dimensioniert ist, um die dem Zentrum am weitesten entfernte Seite der Box (oder vertikale und horizontale Seiten) zu erreichen.
`farthest-corner`	Die endende Form des Gradienten ist so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum aus erreicht.

Hinweis: Frühere Implementierungen dieser Funktion enthielten andere Schlüsselwörter (cover und contain) als Synonyme der Standardbegriffe farthest-corner und closest-side. Verwenden Sie nur die Standardbegriffe, da einige Implementierungen diese älteren Varianten bereits abgeschafft haben.

<color-stop>

Ein Farb-Stopp mit einem <color>-Wert, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder ein <length> entlang der Achse des Gradienten). Ein Prozentsatz von 0% oder eine Länge von 0 stellt das Zentrum des Gradienten dar; der Wert 100% repräsentiert den Schnittpunkt der endenden Form mit dem virtuellen Gradientenstrahl. Prozentwerte 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-interpolation-method> ]? , <color-stop-list>  

<radial-shape> = 
  circle   |
  ellipse  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

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

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

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

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

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-length> = 
  <length-percentage>{1,2}

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 20% vom oberen linken Bereich zentriert und wird 10 Mal zwischen der Mitte und der am weitesten entfernten Ecke (der unteren rechten Ecke) wiederholt. Browser, die mehrfache Positionsfarbstopps unterstützen, zeigen eine Rot-Grün gestreifte Ellipse. Browser, die die Syntax noch nicht unterstützen, sehen einen Gradient, der von Rot nach Schwarz und dann von Blau nach 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 zur Interpolation wird das hsl Farbsystem genutzt und 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 Kästchen links verwendet kürzere Interpolation, das bedeutet, die Farbe geht von Rot zu Blau über den kürzeren Bogen auf dem Farbkreis. Das Kästchen rechts verwendet längere Interpolation, das bedeutet, die Farbe geht von Rot zu Blau über den längeren Bogen und durchläuft dabei Grüntöne, Gelb- und Orangetöne.

Hinweis: Bitte sehen Sie CSS-Gradienten verwenden für weitere Beispiele.

Spezifikationen

Specification
CSS Images Module Level 3 # repeating-gradients

Browser-Kompatibilität

Siehe auch

CSS-Gradienten verwenden
Andere Gradientenfunktionen: 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()

Help improve MDN

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

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