Fonction CSS repeating-linear-gradient()
Exemple
Dégradé linéaire répété :
Essayez-le vous-même »
Définition et utilisation
La fonction repeating-linear-gradient() est utilisée pour créer des images d'arrière-plan en dégradé linéaire répété.
La fonction repeating-linear-gradient() fonctionne de manière similaire à linear-gradient(), mais après avoir atteint le point de fin spécifié, l'image se répète.
Utilisation de base :
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
Cela crée un dégradé linéaire qui se répète à un angle de 45 degrés. Le rouge commence, le jaune est à 10%, et le vert est à 20%, après quoi il se répète.
Arrière-plan rayé :
background: repeating-linear-gradient(90deg, blue, blue 10px, white 10px, white 20px);
Cela crée un arrière-plan rayé horizontal, chaque rayure bleue et blanche faisant 10 pixels de large.
Arrière-plan à rayures diagonales
background: repeating-linear-gradient(135deg, black, black 15px, transparent 15px, transparent 30px);
Cela crée des rayures diagonales noires et transparentes répétées à un angle de 135 degrés, chaque rayure mesurant 15 pixels de large.
Créer un arrière-plan à rayures de zèbre
background: repeating-linear-gradient(90deg, #fff, #fff 10px, #000 10px, #000 20px);
Arrière-plan à rayures arc-en-ciel
background: repeating-linear-gradient(45deg, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px);
Prise en charge des navigateurs
Le nombre dans le tableau indique la première version du navigateur qui prend en charge la fonction.
Le nombre spécifié avec le préfixe « webkit », « moz » ou « o » est le premier numéro de version avec ce préfixe qui prend en charge la fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Syntaxe CSS
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Valeur | Description |
|---|---|
| angle | Définit la direction angulaire du dégradé. De 0deg à 360deg, avec 180deg par défaut. |
| side-or-corner | Spécifie la position de départ du dégradé linéaire. Il se compose de deux mots-clés : le premier spécifie la position horizontale (left ou right), et le second spécifie la position verticale (top ou bottom). L'ordre est arbitraire, et chaque mot-clé est facultatif. |
| color-stop1, color-stop2,... | Spécifie les points d'arrêt de couleur dans le dégradé. La couleur et la position peuvent toutes deux être spécifiées, par exemple couleur 50%, ce qui signifie que la couleur se trouve à la position 50% du dégradé. |
Plus d’exemples
Exemple
Différents dégradés linéaires répétés :
Essayez-le vous-même »
Tutoriel CSS :Dégradés CSS3
autres extensions