saturate() - Fonction CSS
Résumé des caractéristiques de la fonction saturate()
100%
correspond à la saturation initiale (pas de modification).Description de la fonction saturate()
.
La fonction saturate()
définit le degré de saturation des couleurs d'un élément, le plus souvent une image.
Rappelons que la saturation qualifie la vivacité des couleurs.
Des couleurs peu saturées sont proches du gris.
La fonction saturate()
a un effet comparable à la fonction grayscale()
(bien que fonctionnant de façon inversée)
mais utilise un algorithme différent.
La fonction saturate() peut être utilisée avec :
backdrop-filter
: Applique un filtre graphique sur l'élément situé en arrière plan.filter
: Applique un filtre graphique (flou, contraste...) à un élément.
Syntaxe de la fonction saturate()
.
- filter: saturate(50%); n
n
est un nombre positif sans unité ou un pourcentage.
cette valeur indique le taux de saturation :
1
ou100%
ne change rien à l'image, tandis que0
provoque une désaturation totale de l'image (remplacement de toutes les couleurs par des nuances de gris). Les valeurs supérieures à1
ou à100%
augmentent la saturation des couleurs par rapport aux couleurs d'origine.Les valeurs négatives ne sont pas autorisées.
Si aucune valeur n'est précisée (les parenthèses sont vides), la fonction
saturate()
applique la valeur100%
.
Simulateur.
Compatibilité et prise en charge par les navigateurs.
Les filtres graphiques ne posent plus de problèmes de compatibilité. la fonction saturate()
peut être utilisée sans restriction.
saturate()
.
saturate()
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 saturate()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. saturate()
fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.