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
/* 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
odertransform-origin
. Wenn nicht angegeben, ist der Standardwertcenter
. <shape>
-
Die Form des Verlaufs. Der Wert kann
circle
(was bedeutet, dass die Form des Verlaufs ein Kreis mit konstantem Radius ist) oderellipse
(was bedeutet, dass die Form eine achsenausgerichtete Ellipse ist) sein. Wenn nicht angegeben, ist der Standardwertellipse
. <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
undcontain
) als Synonyme für die Standardwertefarthest-corner
undclosest-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 von0%
oder eine Länge von0
repräsentiert das Zentrum des Verlaufs; der Wert100%
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
.radial-gradient {
background: repeating-radial-gradient(
black,
black 5px,
white 5px,
white 10px
);
}
Farthest-corner
.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
In diesem Beispiel für 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 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