SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

CSS/Funktionen/repeating-linear-gradient()

Aus SELFHTML-Wiki
< CSS‎ | Funktionen
Wechseln zu: Navigation, Suche

Die repeating-linear-gradient()-Funktion legt einen sich wiederholenden linearen Farbverlauf fest.

Parameter

siehe linear-gradient()

anwendbar auf background-image, border-image, list-style-image, mask-image
Browsersupport caniuse: css-gradients
Beispiel 
#one {
 background-image: repeating-linear-gradient(90deg, gold, blue);
}
#two { 
 background-image: repeating-linear-gradient(90deg, gold, blue 10%);
}
#three { 
 background-image: repeating-linear-gradient(90deg, gold, blue 5%, gold 10%);
}
  1. repeating-linear-gradient(gold, blue) = repeating-linear-gradient(gold 0 , blue 100%). Das heißt, es erfolgt lediglich eine Wiederholung des Verlaufs.
  2. Wenn Anfang und Ende des Verlaufs verschiedene Farben haben, so wird es einen scharfen Übergang geben, da die Verläufe einfach nur aneinander gereiht werden.
  3. Falls Sie mit prozentualen Längenangaben arbeiten, müssen Sie die Angaben durch die Anzahl der gewünschten Wiederholungen dividieren.


Weblinks

Siehe auch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Funktionen/repeating-linear-gradient()&oldid=99788"