repeating-conic-gradient()

<angle>

Angegeben durch das Schlüsselwort from, gefolgt von einem Winkel als Wert, definiert die Rotation des Verlaufs im Uhrzeigersinn.

<position>

Verwendet dieselbe Länge, Reihenfolge und Schlüsselwortwerte wie die Eigenschaft background-position, die Position definiert das Zentrum des Verlaufs. Wenn ausgelassen, ist der Standardwert center, was bedeutet, dass der Verlauf zentriert wird.

<angular-color-stop>

Der <color>-Wert eines Farbstopps, gefolgt von einer oder zwei optionalen Stopp-Positionen, (ein <angle> entlang der Umfanguachse des Verlaufs). Der letzte Farbstopp minus der erste Farbstopp-Winkel definiert die Größe des sich wiederholenden Verlaufs.

<color-hint>

Ein Interpolations-Hinweis, der definiert, wie der Verlauf zwischen benachbarten Farbstopps verläuft. Die Länge definiert, an welchem Punkt zwischen zwei Farbstopps die Verlaufsfarbe den Mittelpunkt des Farbübergangs erreichen sollte. Wird sie weggelassen, ist der Mittelpunkt des Farbverlaufs der Mittelpunkt zwischen zwei Farbstopps.

Beispiele für sich wiederholende Kegelverläufe umfassen Sternexplosionen. Das Ergebnis der repeating-conic-gradient()-Funktion ist ein Objekt des Datentyps <gradient>, der eine spezielle Art von <image> ist.

Wenn weder der erste noch der letzte Farbstopp einen Farbstopp-Winkel größer als 0 Grad oder kleiner als 360 Grad aufweist, wird der Kegelverlauf nicht wiederholt.

Wie bei jedem Verlauf hat ein sich wiederholender Kegelverlauf keine intrinsischen Dimensionen; d.h. er hat weder eine natürliche noch bevorzugte Größe oder ein bevorzugtes Seitenverhältnis. Seine konkrete Größe wird die Größe des Elements annehmen, auf das er angewendet wird, oder die Größe des <image>, wenn sie anders als die Größe des Elements festgelegt ist.

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-conic-gradient() nicht auf background-color und anderen Eigenschaften, die den Datentyp <color> verwenden.

Die Syntax von repeating-conic-gradient ähnelt der Syntax von conic-gradient() und repeating-radial-gradient(). Wie beim nicht wiederholenden Kegelverlauf werden die Farbstopps um einen Bogen des Verlaufs platziert. Wie beim wiederholenden Radialverlauf ist die Größe des sich wiederholenden Abschnitts der erste Farbstopp abzüglich des Winkels des letzten Farbstopps.

Die oben genannten Verläufe sind als ein Drittel blau, ein Drittel rot und ein Drittel gelb definiert.

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

Damit ein wiederholender Verlauf wiederholt wird, definieren wir den ersten und letzten Farbstopp. Wie bei nicht wiederholenden Verläufen wird davon ausgegangen, dass der erste und letzte Farbstopp 0 und entweder 100% oder 360 Grad beträgt, wenn nicht explizit deklariert. Wenn die Standartwerte verwendet werden, ist der wiederholende Bogen 360 Grad und wiederholt sich daher nicht.

Wie beim nicht wiederholenden Kegelverlauf werden die Farbstopps um einen Verlaufsbogen platziert — den Umfang eines Kreises, anstatt auf der Verlauflinie, die vom Zentrum des Verlaufs ausgeht. Die Farben wechseln, als ob sie um das Zentrum eines Kreises gedreht würden, beginnend an der Spitze, wenn kein from <angle> deklariert ist, und im Uhrzeigersinn für die Größe des Winkels, der die Differenz zwischen den größten und kleinsten Farbwinkel darstellt, dann wiederholend.

Ein sich wiederholender Kegelverlauf wird durch Angabe eines Rotationswinkels, des Mittelpunkts des Verlaufs und dann Angabe einer Liste von Farbstopps spezifiziert. Wie nicht wiederholende Kegelverläufe werden die Farbstopps eines wiederholenden Kegelverlaufs mit einem <angle> spezifiziert. Einheiten umfassen deg für Grad, grad für Graden, rad für Radianten und turn für Umdrehungen. Es gibt 360 Grad, 400 Graden, 2π Radianten und 1 Umdrehung in einem Kreis. Browser, die wiederholende Kegelverläufe unterstützen, akzeptieren auch Prozentwerte, wobei 100% 360 Grad entsprechen, aber das ist nicht in der Spezifikation.

Die Syntax für Radial- und Kegelverläufe ermöglicht es, das Zentrum des Verlaufs überall innerhalb oder sogar außerhalb des Bilds zu positionieren. Die Werte für die Position sind ähnlich der Syntax für 2-Wert background-position.

Der Verlaufsbogen ist Teil des Umfangs des Verlaufs. 0 Grad ist Norden oder 12:00 Uhr. Die Farben des Verlaufs werden durch die angewinkelten Farbstopps, ihre Startpunkte, Endpunkte und zwischen ihnen, und optional geneigten Farbstopp-Punkten bestimmt. Die Übergänge zwischen den Farben können mit Farbhints zwischen den benachbarten Farben der Farbstopps verändert werden.

Anpassen von Verläufen

Durch das Hinzufügen weiterer gekippten Farbstopp-Punkte auf dem Verlaufsbogen können Sie einen hochgradig angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farbstopps kann explizit definiert werden, indem ein <angle> verwendet wird. Wenn Sie den Ort eines Farbstopps nicht spezifizieren, wird er genau zwischen dem vorhergehenden und dem folgenden platziert. Wie bei ihrem nicht wiederholenden Verlaufsäquivalent, wenn Sie keinen Winkel für den ersten oder letzten Farbstopp angeben, lauten die Werte 0 Grad und 360 Grad. Wenn Sie für beide keinen Winkel angeben, erhalten Sie einen nicht wiederholenden Kegelverlauf. Wenn Sie für den ersten oder letzten einen anderen Wert als 0 oder 360 Grad angeben, wird der Verlauf basierend auf diesem Wert wiederholt. Wenn Sie beispielsweise keinen Winkel für die erste Farbe angeben und 10% für den letzten Farbstopp angeben, wird der Bogen 10 Mal wiederholt. Der Startpunkt ist der erste deklarierte Farbstopp, und der letzte Farbstopp ist der letzte deklarierte Farbstopp-Winkel. Die folgenden zwei Verläufe sind gleichwertig:

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

Standardmäßig wechseln Farben sanft von der Farbe an einem Farbstopp zur Farbe am folgenden Farbstopp, wobei der Mittelpunkt zwischen den Farben der halbe Punkt zwischen dem Farbübergang ist. Sie können diesen Mittepunkt des Farbübergangs an jeden Punkt zwischen zwei Farbstopps verschieben, indem Sie einen Farbhint hinzufügen, der angibt, wo die Mitte des Farbübergangs sein soll.

Wenn zwei oder mehr Farbstopps am selben Ort sind, wird der Übergang eine harte Linie zwischen den ersten und letzten, an diesem Ort deklarierten Farben sein.

Obwohl Sie verschiedene Winkeleinheiten mischen und anpassen können, sollten Sie das nicht tun. Es macht CSS schwer lesbar.

<repeating-conic-gradient()> = 
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<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-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<length-percentage> = 
  <length>      |
  <percentage>  

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

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

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

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  |
  <zero>              

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

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

Browser stellen keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien zur Verfügung. Das ist vor allem für Bildschirmleseprogramme wichtig, da diese seine Anwesenheit nicht ankündigen und daher nichts an ihre Nutzer weitergeben. Während es möglich ist, Tortendiagramme, Schachbrettmuster und andere Effekte mit Kegelverläufen zu erstellen, bieten CSS-Bilder keine native Möglichkeit, Alternativtexte zuzuweisen, und das von dem Kegelverlauf dargestellte Bild wird daher für Bildschirmleser-Benutzer nicht zugänglich sein. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des gesamten Zwecks der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.1
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verstehen von WCAG 2.0

Dieser Verlauf wiederholt sich 18 Mal, aber da wir nur die rechte Hälfte sehen, sehen wir nur 9 Wiederholungen.

div {
  width: 200px;
  height: 200px;
}

<div></div>

div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    green,
    blue 2deg 5deg,
    green,
    yellow 15deg 18deg,
    green 20deg
  );
}

<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 Interpolationsbeispiel wird das hsl Farbsystem verwendet und der Farbton wird interpoliert.

.shorter {
  background-image: repeating-conic-gradient(
    in hsl shorter hue,
    red,
    blue 180deg
  );
}

.longer {
  background-image: repeating-conic-gradient(
    in hsl longer hue,
    red,
    blue 180deg
  );
}

Das Kästchen auf der linken Seite verwendet kürzere Interpolation, was bedeutet, dass die Farbe direkt von rot zu blau über den kürzeren Bogen auf dem Farbkreis geht. Das Kästchen auf der rechten Seite verwendet längere Interpolation, was bedeutet, dass die Farbe von rot zu blau über den längeren Bogen geht und dabei durch Grün-, Gelb- und Orangetöne wandert.

Bitte lesen Sie Verwendung von CSS-Verläufen für weitere Beispiele.

• Verwendung von CSS-Verläufen
• Andere Verlaufsfunktionen: conic-gradient(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()