Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction repeating-linear-gradient()

Description de la fonction repeating-linear-gradient().

La fonction repeating-linear-gradient() définit un dégradé de couleurs linéaire répété sur toute la surface de l'élément. Ce dégradé peut être substitué à une image dans toutes les propriétés qui attendent une image mais son utilisation est surtout fréquente avec background-image.

Pour que la répétition se déclenche, le dégradé doit être dimensionné, et d'une taille inférieure à celle de l'élément sur lequel on l'applique.

La fonction repeating-linear-gradient() peut être utilisée avec :

Syntaxe de la fonction repeating-linear-gradient().

  • background: linear-gradient(90deg,blue 0%, pink 10%, blue 20%); a c1 p1 c2 p2 c3 p3

    Ceci est un exemple de syntaxe pour la fonction repeating-linear-gradient(). Reportez-vous à sa petite sœur, la fonction sans répétition linear-gradient pour consulter toutes les variantes de syntaxe.

Exemples.

Cliquez sur les exemples pour afficher le CSS correspondant.

Toiture en tuiles
Barrière

Association de deux dégradés, un horizontal, avec répétition, comportant des parties transparentes, et un deuxième dégradé sans répétition, et dans le sens vertical.
Torchon de cuisine (motif "Vichy")

Ce motif très connu, souvent utilisé dans le linge de maison, peut être obtenu en croisant deux dégradés avec répétition.
Hachures

Un simple dégradé répété avec une orientation de -45 degrés.
Une couleur gris clair (silver) a également été positionnée en arrière-plan.
Bordures en dégradé

Utilisation d'un dégradé avec répétition sur la bordure avec la propriété border-image.

Simulateur.

background-color:
( a c1 p1 c2 p2 )

Compatibilité et prise en charge suivant les navigateurs.

La plupart des navigateurs traitent correctement les dégradés de couleurs linéaires.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Arrière-plan - Propriétés.

Arrière-plan - Fonctions.