`repeating-radial-gradient()` CSS-Funktion

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die repeating-radial-gradient() CSS Funktion erstellt ein Bild, das aus sich wiederholenden Verläufen besteht, die von einem Ursprung aus radial verlaufen. Sie ähnelt der radial-gradient() und nimmt dieselben Argumente an, jedoch werden die Farbstopps unendlich in alle Richtungen wiederholt, um den gesamten Container abzudecken, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des <gradient> Dateityps, der eine spezielle 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%;
}

Mit jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Abmessungen des grundlegenden radialen Verlaufs (der Abstand zwischen dem letzten und dem ersten Farbstopp) verschoben. So fällt die Position jedes Endfarbstopps mit einem Anfangsfarbstopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang, der gemildert werden kann, indem die erste Farbe als letzte Farbe wiederholt wird.

Wie jeder Verlauf hat auch ein wiederholender radialer Verlauf keine intrinsischen Abmessungen; das heißt, er hat keine natürliche oder bevorzugte Größe, noch ein bevorzugtes Verhältnis. Seine konkrete Größe entspricht der Größe des Elements, 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 <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 (bedeutet, dass die Form des Verlaufs 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 Verlaufs trifft auf die nächstgelegene Seite der Box von seinem Zentrum aus (bei Kreisen) oder trifft auf die vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (bei Ellipsen).
`closest-corner`	Die endende Form des Verlaufs wird so dimensioniert, dass sie genau die nächstgelegene Ecke der Box von ihrem Zentrum aus trifft.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die endende Form so dimensioniert ist, dass sie die am weitesten vom Zentrum entfernte Seite der Box trifft (oder vertikal und horizontal am weitesten entfernte Seiten).
`farthest-corner`	Die endende Form des Verlaufs wird so dimensioniert, dass sie genau die am weitesten entfernte Ecke der Box von ihrem Zentrum aus trifft.

Hinweis: Frühe Implementierungen dieser Funktion enthielten andere Schlüsselwörter (cover und contain) als Synonyme für die Standardbegriffe 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 Verlaufsachse). Ein Prozentsatz von 0%, oder eine Länge von 0, steht für das Zentrum des Verlaufs; der Wert 100% repräsentiert die Schnittstelle der endenden Form mit dem virtuellen Verlaufsstrahl. Zwischenwerte in Prozent werden 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-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ßer 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% vom oberen linken Rand zentriert und wiederholt sich 10-mal zwischen dem Zentrum und der am weitesten entfernten Ecke (unten rechts). Browser, die mehrfache Positions-Farbstopps unterstützen, werden eine rot-grün gestreifte Ellipse anzeigen. Browser, die die Syntax noch nicht unterstützen, zeigen einen Verlauf von Rot zu Schwarz und dann von Blau zu Grün.

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 Farbmodell verwendet und der Farbton 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
  );
}

Der Kasten links verwendet kürzere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den kürzeren Bogen am Farbkreis geht. Der Kasten rechts verwendet längere Interpolation, was bedeutet, dass die Farbe von Rot zu Blau über den längeren Bogen geht und durch Grün, Gelb und Orange läuft.

Hinweis: Weitere Beispiele finden Sie unter Verwendung von CSS-Verläufen.

Spezifikationen

Spezifikation
CSS Images Module Level 3 # repeating-gradients

Browser-Kompatibilität

Siehe auch

Verwendung von CSS-Verläufen
Andere Verlaufsfunktionen: 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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

repeating-radial-gradient() CSS-Funktion

Help improve MDN

`repeating-radial-gradient()` CSS-Funktion