repeating-linear-gradient() - Fonction CSS
Résumé des caractéristiques de la 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.
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 :
background-image
: Image d'arrière-plan.border-image-source
: Définit l'image utilisée pour construire la bordure.list-style-image
: Définit une image à utiliser à la place des puces.mask-image
: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
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étitionlinear-gradient
pour consulter toutes les variantes de syntaxe.
Exemples.
Cliquez sur les exemples pour afficher le CSS correspondant.
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.
border-image
.
Simulateur.
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()
repeating-linear-gradient()
.
repeating-linear-gradient()
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.