repeating-radial-gradient()

Die repeating-radial-gradient()-Funktion in CSS function erstellt ein Bild, das aus sich wiederholenden Verläufen besteht, die von einem Ursprung aus strahlen. Sie ist ähnlich wie radial-gradient() und nimmt die gleichen Argumente, wiederholt jedoch die Farbstopps unendlich in alle Richtungen, um ihren gesamten Container zu füllen, ähnlich wie repeating-linear-gradient(). Das Ergebnis der Funktion ist ein Objekt des Datentyps <gradient>, das 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%;
}

Bei jeder Wiederholung werden die Positionen der Farbstopps um ein Vielfaches der Dimensionen des grundlegenden radialen Verlaufs verschoben (der Abstand zwischen dem letzten Farbpunkt und dem ersten). Dadurch fällt die Position jedes endenden Farbpunkts mit einem startenden Farbstopp zusammen; wenn die Farbwerte unterschiedlich sind, führt dies zu einem scharfen visuellen Übergang, der durch die Wiederholung der ersten Farbe als letzte Farbe gemildert werden kann.

Wie jeder Verlauf hat ein sich wiederholender radialer Verlauf 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

/* 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 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 ein achsenausgerichtetes Ellipse ist) sein. Wenn nicht angegeben, ist ellipse der Standardwert.

<extent-keyword>

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

Schlüsselwort	Beschreibung
closest-side	Die Endform des Verlaufs trifft auf die dem Zentrum am nächsten gelegene Seite des Kastens (bei Kreisen) oder trifft auf die vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (bei Ellipsen).
closest-corner	Die Endform des Verlaufs ist so dimensioniert, dass sie genau die nächste Ecke des Kastens von ihrem Zentrum aus erreicht.
farthest-side	Ähnlich wie closest-side, außer dass die Endform so dimensioniert ist, dass sie die dem Zentrum am weitesten entfernte Seite des Kastens (oder vertikale und horizontale Seiten) erreicht.
farthest-corner	Die Endform des Verlaufs ist so dimensioniert, dass sie genau die am weitesten entfernte Ecke des Kastens von ihrem Zentrum aus erreicht.

Hinweis: Frühere Implementierungen dieser Funktion beinhalteten andere Schlüsselwörter (cover und contain) als Synonyme für das Standard 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 ein <length> entlang der Achse 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 Endform mit dem virtuellen Verlaufsstrahl. Prozentwerte 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-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;
}

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

.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 wird 10 Mal zwischen dem Zentrum und der am weitesten entfernten Ecke (die untere rechte Ecke) wiederholt. Browser, die Mehrfach-Positionen-Farbstopps unterstützen, zeigen eine rot und grün gestreifte Ellipse. Browser, die die Syntax noch nicht unterstützen, zeigen einen Verlauf an, der von rot zu schwarz und dann von blau zu grün wechselt.

Interpolierung 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 verwendet und der Farbton wird interpoliert.

.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 auf der linken Seite verwendet die kürzere Interpolation, was bedeutet, dass die Farbe von rot zu blau mit dem kürzeren Bogen auf dem Farbkreis geht. Das Kästchen auf der rechten Seite verwendet die längere Interpolation, was bedeutet, dass die Farbe von rot zu blau geht, indem sie den längeren Bogen durchläuft, der durch Grün, Gelb und Orange führt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Verläufen
• Andere Verlausfunktionen: 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()