CSS - Fonction saturate()
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 l'effet inverse de la fonction grayscale()
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
: Filtre graphique.
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.
Simulateur.
filter:

Compatibilité et prise en charge par les navigateurs.
La plupart des navigateurs traitent correctement les effets de filtre sur les images.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Images et filtres - Propriétés.
backdrop-filter
: Applique un filtre graphique sur l'élément situé en arrière plan.background-blend-mode
: Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.clip-path
: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)filter
: Filtre graphique.image-rendering
: Mode de mise à l'échelle des images.mix-blend-mode
: Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.
Images et filtres - Fonctions.
blur()
: Applique un effet de flou à une image.brightness()
: Ajuste la luminosité d'une image.contrast()
: Ajuste le contraste d'une image.drop-shadow()
: Définit l'ombre d'un élément (dimensions, flou, couleur).grayscale()
: Convertit une image en nuances de gris (noir et blanc).hue-rotate()
: Change les couleurs d'une image (rotation des teintes).image()
: Désigne ou définit une image.inset()
: Définit un rectangle, utilisable pour découper une image.invert()
: Inverse les couleurs d'une image.opacity()
: Détermine le degré de transparence d'un élément.sepia()
: Applique un effet sépia à une image.