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 :

repeating-linear-gradient() - Fonction CSS

repeating-linear-gradient()

Résumé des caractéristiques de la fonction repeating-linear-gradient()

Description rapide
Détermine un dégradé de couleur linéaire avec répétition.
Statut
Standard
Module W3C
Module CSS - Images
Références (W3C)
Statut du document:: WD (document de travail)

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.

Reportez-vous au tutoriel sur les dégradés de couleurs pour une présentation générale des dégradés en CSS.

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
Une 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é entre noir et blanc, répété avec une orientation de -45 degrés.
Bordures en dégradé : utilisation d'un dégradé avec répétition sur la bordure avec la propriété border-image.

Simulateur.

background-image :

Compatibilité et prise en charge suivant les navigateurs.

Le tableau de compatibilité ci-dessous présente la prise en charge par les navigateurs des dégradés, des dégradés répétitifs, et le bon traitement de la fonction repeating-linear-gradient()

Colonne 1
Restitution des dégradés de couleurs linéaires ou radials.
Colonne 2
Restitution des dégradés de couleurs répétitifs.
Colonne 2
Compatibilité des navigateurs avec la fonction CSS repeating-linear-gradient().
1
Dégradé linéaire ou radial
2
Dégradés répétitifs
3
repeating-linear-gradient()
Estimation de la prise en charge en pourcentage du parc actuel.
93%
98%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que repeating-linear-gradient().

Les spécifications CSS éditées par le W3C sont organisées en modules. repeating-linear-gradient() fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit l'orientation d'une image (doit-elle être tournée ?)
Mode de mise à l'échelle des images.
Définit comment un contenu multimédia (image, vidéo) doit s'adapter aux dimensions de son contenant.
Position d'une image ou d'une vidéo par rapport à son container.

Fonctions.

Définit un dégradé de couleurs conique.
Réalise le mélange de plusieurs images.
Récupère l'aspect d'un élément sous forme d'une image.
Désigne ou définit une image.
Propose au navigateur un choix d'images.
Détermine un dégradé de couleur linéaire.
Détermine un dégradé de couleur radial (depuis le centre vers les bords).
Définit un dégradé de couleurs conique, avec répétition
Détermine un dégradé de couleur radial avec répétition.
Définit une image en bande de couleurs.