La fonction CSS repeating-linear-gradient
créé une <image>
composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec linear-gradient
mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.
Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type <color>
) CSS mais une image (type <image>
) sans dimension intrinsèque ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.
Note : Le type <gradient>
est un sous-type du type <image>
. À ce titre, repeating-linear-gradient()
ne fonctionnera pas pour background-color
et les autres propriétés qui utilisent le type de données <color>
.
Syntaxe
/* Un dégradé répétitif sur un axe à 45 degrés */
/* débutant bleu et finissant rouge, répété 3 fois */
repeating-linear-gradient( 45deg, blue, red 33.3% );
/* Un dégradé répétitif allant du coin inférieur droit */
/* à coin supérieur gauche débutant bleu et finissant rouge */
/* et répété tous les 20 pixels */
repeating-linear-gradient( to left top, blue, red 20px);
/* Un dégradé répétitif allant du bas vers le haut, */
/* débutant bleu, étant vert après 40% et finissant rouge */
repeating-linear-gradient( 0deg, blue, green 40%, red );
/* Un dégradé répété cinq fois, progressant de gauche à
droite, commençant en rouge, passant en vert puis à
nouveau en rouge */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
Valeurs
<side-or-corner>
- Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale,
left
ouright
, le second indique le côté sur une ligne verticale,top
oubottom
. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
Les valeursto top
,to bottom
,to left
etto right
sont respectivement traduites vers les angles0deg
,180deg
,270deg
,90deg
. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte. <angle>
- Un angle pour la direction du dégradé. L'angle démarre à
0deg
(ce qui est équivalent àto top
) et progresse dans le sens des aiguilles d'une montre. Voir<angle>
. <linear-color-stop>
- Cette valeur est composée d'une valeur de couleur (type
<color>
), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type<length>
) mesurée le long de l'axe du dégradé). <color-hint>
- L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.
- Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.
Syntaxe formelle
repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) \---------------------------------/ \---------------/ Définition de la ligne du dégradé Liste des points d'arrêt où<side-or-corner> = [left | right] || [top | bottom]
et<
color-stop-list> = [ <
linear-color-stop> [, <color-hint>? ]? ]#, <
linear-color-stop> et <
linear-color-stop> = <color> [ <color-stop-length> ]? et <color-stop-length> = [ <percentage> | <length> ]{1,2} et <color-hint> = [ <percentage> | <length> ]
Exemples
Bandes zébrées
body {
width: 100vw;
height: 100vh;
}
body {
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 20px,
black 20px,
black 40px);
/* avec plusieurs longueurs pour les points d'arrêt */
background-image: repeating-linear-gradient(-45deg,
transparent 0 20px,
black 20px 40px);
}
Dix barres horizontales répétées
body {
width: 100vw;
height: 100vh;
}
body {
background-image: repeating-linear-gradient(to bottom,
rgb(26,198,204),
rgb(26,198,204) 7%,
rgb(100,100,100) 10%);
}
Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.
Note : Voir la page Manipuler les dégradés CSS pour plus d'exemples.
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Images Module Level 3 La définition de 'repeating-linear-gradient()' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Manipuler les dégradés CSS
- Les propriétés liées aux dégradés :
- Les propriétés où ces fonctions peuvent être utilisées :
- Un dégradé CSS interactif
<image>
image()
element()
image-set()
cross-fade