saturate()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since septembre 2016.
La fonction CSS saturate() permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type <filter-function>.
Exemple interactif
filter: saturate(1);
filter: saturate(4);
filter: saturate(50%);
filter: saturate(0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
Syntaxe
css
saturate(multiplicateur)
Paramètres
multiplicateur-
L'intensité de la modification sous la forme d'un nombre (
<number>) ou d'un pourcentage (<percentage>). Une valeur inférieure à100%réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de0%désaturera complètement l'image alors qu'une valeur de100%laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est1.
Exemples
Exemples de valeurs correctes pour saturate()
css
saturate(0); /* Complètement sous-saturée */
saturate(.4); /* Sous-saturée à 40% */
saturate(100%); /* Aucun effet */
saturate(200%); /* Saturation doublée */
Spécifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-saturate |
Compatibilité des navigateurs
Loading…
Voir aussi
<filter-function>et les autres fonctions associées