repeating-conic-gradient()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2020⁩.

* Some parts of this feature may have varying levels of support.

Die repeating-conic-gradient() CSS Funktion erstellt ein Bild, das aus einem sich wiederholenden Verlauf besteht (anstatt eines einzelnen Verlaufs) mit Farbübergängen, die um einen Mittelpunkt rotieren (anstatt vom Zentrum ausstrahlen).

Probieren Sie es aus

background: repeating-conic-gradient(red 0%, yellow 15%, red 33%);

background: repeating-conic-gradient(
  from 45deg at 10% 50%,
  brown 0deg 10deg,
  darkgoldenrod 10deg 20deg,
  chocolate 20deg 30deg
);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

Syntax

css

/* Starburst: a blue on blue starburst: the gradient
   is a starburst of lighter and darker blue,
   centered in the upper left quadrant,
   offset by 3degrees so there is no up/down straight line */
repeating-conic-gradient(
  from 3deg at 25% 25%,
  hsl(200 100% 50%) 0deg 15deg,
  hsl(200 100% 60%) 10deg 30deg
)

/* Interpolation in polar color space
  with longer hue interpolation method */
repeating-conic-gradient(in hsl shorter hue, red, blue 90deg, green 180deg)

Werte

<angle>: Mit dem Schlüsselwort from eingeleitet und ein Winkelwert, definiert die Rotation des Verlaufs im Uhrzeigersinn.
<position>: Verwendet dieselben Längen-, Reihenfolge- und Schlüsselwortwerte wie die Eigenschaft background-position; die Position definiert das Zentrum des Verlaufs. Wenn weggelassen, ist der Standardwert center, was bedeutet, dass der Verlauf zentriert wird.
<angular-color-stop>: Ein Farb-Stoppwert <color>, gefolgt von einer oder zwei optionalen Stopp-Positionen (ein <angle> entlang der Achse des Umfangs des Verlaufs). Der letzte Farb-Stopp minus des Winkels des ersten Farb-Stopps definiert die Größe des sich wiederholenden Verlaufs.
<color-hint>: Ein Interpolations- Hinweis, der definiert, wie der Verlauf zwischen benachbarten Farb-Stopps fortschreitet. Die Länge definiert, an welchem Punkt zwischen zwei Farb-Stopps die Verlauf-Farbe den Mittelpunkt des Farbübergangs erreichen soll. Wird weggelassen, ist der Mittelpunkt des Farbübergangs der Mittelpunkt zwischen zwei Farb-Stopps.

Hinweis: Die Darstellung von Farb-Stopps in sich wiederholenden konischen Verläufen folgt denselben Regeln wie Farb-Stopps in linearen Verläufen.

Beschreibung

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

Wenn weder die ersten noch die letzten Farb-Stopps einen Farb-Stopp-Winkel größer als 0deg oder kleiner als 360 Grad enthalten, wird der konische Verlauf nicht wiederholt.

Wie bei jedem Verlauf hat ein sich wiederholender konischer 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 wird der Größe des Elements entsprechen, auf das er angewendet wird, oder der Größe, auf die das <image> gesetzt ist, wenn es auf etwas anderes als die Größe des Elements gesetzt 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 in background-color und anderen Eigenschaften, die den <color> Datentyp verwenden.

Hinweis: Um einen konischen Verlauf zu erstellen, der sich nicht wiederholt, machen Sie den Verlauf zu einer vollen 360-Grad-Drehung, oder verwenden Sie die conic-gradient() Funktion stattdessen.

Verständnis von sich wiederholenden konischen Verläufen

Die Syntax für sich wiederholende konische Verläufe ähnelt der Syntax von conic-gradient() und repeating-radial-gradient(). Wie bei dem sich nicht wiederholenden konischen Verlauf werden die Farb-Stopps um einen Verlaufsbogen platziert. Wie beim sich wiederholenden radialen Verlauf ist die Größe des sich wiederholenden Abschnitts der erste Farb-Stopp, abzüglich des Winkels des letzten Farb-Stopps.

Vergleich der Farb-Stopps für sich wiederholende und sich nicht wiederholende konische und radiale Verläufe

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

css

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 sich wiederholender Verlauf tatsächlich wiederholt wird, definieren wir die ersten und letzten Farb-Stopps. Wie in nicht wiederholenden Verläufen wird angenommen, dass die ersten und letzten Farb-Stopps 0 und entweder 100% oder 360deg sind, wenn sie nicht explizit deklariert werden. Bei diesen Standardwerten ist der sich wiederholende Bogen 360 Grad und wiederholt sich daher nicht.

Wie beim nicht wiederholenden konischen Verlauf werden die Farb-Stopps um einen Verlaufsbogen platziert — den Umfang eines Kreises, anstatt auf der Verlaufslinie, die vom Zentrum des Verlaufs ausgeht. Die Farben ändern sich so, als ob sie um das Zentrum eines Kreises gedreht werden, beginnend oben, wenn kein from <angle> angegeben ist, und im Uhrzeigersinn für die Größe des Winkels, der der Unterschied zwischen dem größten und kleinsten Farbwinkel ist, und dann sich wiederholt.

Ein sich wiederholender konischer Verlauf wird angegeben, indem ein Rotationswinkel, das Zentrum des Verlaufs, und dann eine Liste von Farb-Stopps spezifiziert werden. Wie bei nicht wiederholenden konischen Verläufen werden die Farb-Stopps eines sich wiederholenden konischen Verlaufs mit einem <angle> angegeben. Einheiten umfassen deg für Grad, grad für Gradienten, rad für Radiale und turn für Umdrehungen. Ein Kreis umfasst 360 Grad, 400 Gradient, 2π Radiale und 1 Umdrehung. Browser, die sich wiederholende konische Verläufe unterstützen, akzeptieren auch Prozentwerte, wobei 100% 360 Grad entspricht, aber dies ist nicht in der Spezifikation.

Die Syntax für radiale und konische Verläufe ermöglicht es, das Zentrum des Verlaufs überall im oder sogar außerhalb des Bildes zu positionieren. Die Werte für die Positionierung sind der Syntax für die 2-Wert background-position ähnlich.

Der Verlaufsbogen ist Teil des Umfangs des Verlaufs. 0 Grad ist Norden oder 12:00 Uhr. Die Farben des Verlaufs werden durch die gewinkelten Farb-Stopps, ihre Startpunkte, Endpunkte und, dazwischen, optionale gewinkelte Farb-Stopp-Punkte bestimmt. Die Übergänge zwischen den Farben können mit Farbhilfen zwischen den Farb-Stopps benachbarter Farben verändert werden.

Anpassen von Verläufen

Durch Hinzufügen von mehr gewinkelten Farb-Stopp-Punkten auf dem Verlaufsbogen können Sie einen stark angepassten Übergang zwischen mehreren Farben erstellen. Die Position eines Farb-Stopps kann explizit durch Verwendung eines <angle> definiert werden. Wenn Sie die Lage eines Farb-Stopps nicht angeben, wird er in der Mitte zwischen dem, der ihm vorausgeht, und dem, der ihm folgt, platziert. Wie bei dem nicht wiederholenden Verlauf werden, wenn Sie keinen Winkel für den ersten oder letzten Farb-Stopp angeben, die Werte 0deg und 360deg sein. Wenn Sie keinen Winkel für beide angeben, erhalten Sie einen sich nicht wiederholenden konischen Verlauf. Wenn Sie bei dem ersten oder dem letzten einen anderen als 0 oder 360 Grad angeben, wird der Verlauf basierend auf diesem Wert wiederholt. Zum Beispiel, wenn Sie keinen Winkel für die erste Farbe angeben und 10% für den letzten Farb-Stopp festlegen, wird der Bogen 10 Mal wiederholt. Vielmehr ist der Startpunkt der erste deklarierte Farb-Stopp und der letzte Farb-Stopp ist der Winkel des letzten deklarierten Farb-Stopps. Die folgenden zwei Verläufe sind äquivalent:

css

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

Standardmäßig ändern sich die Farben nahtlos von der Farbe bei einem Farb-Stopp zur Farbe beim nächsten Farb-Stopp, wobei der Mittelpunkt zwischen den Farben der Mittelpunkt des Farbübergangs ist. Sie können diesen Farbübergangsmittelpunkt an jeden Punkt zwischen zwei Farb-Stopps verschieben, indem Sie einen Farbhinweis hinzufügen, der angibt, wo der Mittelpunkt des Farbübergangs sein soll.

Wenn zwei oder mehr Farb-Stopps an derselben Position sind, wird der Übergang eine harte Linie zwischen der ersten und der letzten an dieser Position deklarierten Farbe sein.

Obwohl Sie unterschiedliche Winkeltypen mischen und anpassen können, sollten Sie dies nicht tun. Das macht CSS schwer lesbar.

Formale Syntax

<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> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

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

<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>  

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

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

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

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

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

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

Barrierefreiheit

Browser stellen assistierenden Technologien keine besonderen Informationen zu Hintergrundbildern bereit. Dies ist primär für Bildschirmlesegeräte wichtig, da ein Bildschirmleser dessen Vorhandensein nicht ansagt und daher nichts an seine Benutzer weitergibt. Obwohl es möglich ist, Torten-Diagramme, Schachbrettmuster und andere Effekte mit konischen Verläufen zu erstellen, bieten CSS-Bilder keine native Möglichkeit, Alternativtexte zuzuweisen, und daher wird das durch den konischen Verlauf dargestellte Bild für Bildschirmlesegeräte 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, diese semantisch im Dokument zu beschreiben.

Beispiele

Schwarz-Weiß-Stern

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

<div></div>

css

div {
  background-image: repeating-conic-gradient(white 0 9deg, black 9deg 18deg);
}

Verschobener Verlauf

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>

css

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

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

css

.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 links benutzt kürzere Interpolation, was bedeutet, dass die Farbe direkt von rot zu blau geht, indem der kürzere Bogen auf dem Farbkreis verwendet wird. Das Kästchen rechts benutzt längere Interpolation, was bedeutet, dass die Farbe von rot zu blau über den längeren Bogen geht, durchläuft Grün, Gelb und Orange.

Weitere Beispiele für repeating-conic-gradient

Bitte sehen Sie sich Verwendung von CSS-Verläufen für weitere Beispiele an.

Spezifikationen

Specification
CSS Images Module Level 4 # repeating-gradients

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

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

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