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 erstellt ein Bild, das aus sich wiederholenden Verläufen besteht, die von einem Ursprung ausgehen. 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 vom Datentyp <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%;
}

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

Wie bei jedem Verlauf hat ein sich 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 es 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%)

Values

<position>

Die Position des Verlaufs, interpretiert in gleicher Weise wie background-position oder transform-origin. Wenn nicht angegeben, ist center der Standardwert.

<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 ellipse der Standardwert.

<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 nächstgelegene Seite des Kastens (für Kreise) oder trifft auf beide vertikalen und horizontalen Seiten, die dem Zentrum am nächsten sind (für Ellipsen).
`closest-corner`	Die endende Form des Verlaufs ist so bemessen, dass sie genau die nächste Ecke des Kastens von seinem Zentrum aus erreicht.
`farthest-side`	Ähnlich wie `closest-side`, außer dass die endende Form so bemessen ist, dass sie die dem Zentrum fernstliegende Seite des Kastens erreicht (oder vertikale und horizontale Seiten).
`farthest-corner`	Die endende Form des Verlaufs ist so bemessen, dass sie genau die fernstliegende Ecke des Kastens von seinem Zentrum aus erreicht.

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 bzw. Verwenden Sie nur die Standardbegriffe, da einige Implementierungen diese älteren Varianten bereits entfernt haben.

<color-stop>

Der <color>-Wert eines Farbstopps, gefolgt von einer optionalen Stopp-Position (entweder ein <percentage> oder ein <length> entlang der Verlaufslinie). Ein Prozentsatz von 0% oder eine Länge von 0 stellt das Zentrum des Verlaufs dar; der Wert 100% stellt die Schnittstelle der endenden Form mit dem virtuellen Verlaufstrahl dar. Prozentwerte dazwischen sind linear auf dem virtuellen Verlaufstrahl 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ße 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 zu 20% vom oberen linken Punkt zentriert und wiederholt sich 10 Mal zwischen dem Zentrum und der fernstliegenden Ecke (der unteren rechten Ecke). Browser, die Mehrfachpositions-Farbstopps unterstützen, zeigen eine rot-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 geht.

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 verwendet, und der 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 linke Kästchen verwendet shorter interpolation, was bedeutet, dass die Farbe über den kürzeren Bogen auf dem Farbkreis von Rot zu Blau wechselt. Das rechte Kästchen verwendet longer interpolation, was bedeutet, dass die Farbe über den längeren Bogen von Rot zu Blau verläuft und dabei durch Grüntöne, Gelbtöne und Orangetöne geht.

Hinweis: Bitte sehen Sie Using CSS gradients für mehr Beispiele.

Spezifikationen

Specification
CSS Images Module Level 3 # repeating-gradients

Browser-Kompatibilität

Siehe auch

Using CSS gradients
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

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

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