Fonction CSS saturate()

Définition et utilisation

CSS saturate() Les fonctions de filtre permettent de régler la saturation de l'élément (intensité des couleurs).

  • 0% (ou 0) rend l'élément complètement désaturé
  • 100% (ou 1) n'a pas d'effet
  • 200% (ou 2) rend l'élément supersaturé

Exemple

Exemple 1

Définir différentes saturation des images :

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

Essayer par vous-même

Exemple 2

permet de saturate() et backdrop-filter Utilisation combinée des attributs :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: saturate(450%);
  backdrop-filter: saturate(450%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Essayer par vous-même

Syntaxe CSS

saturate(amount)
Valeur Description
amount

Optionnel. Spécifiez la valeur de saturation, qui peut être un nombre ou un pourcentage.

0% (ou 0) rend l'élément complètement désaturé.

100% (ou 1) représente l'effet sans action.

Une valeur supérieure à 100% fournira un effet supersaturé.

Détails techniques

Version : Module d'effets de filtre CSS niveau 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge complètement la fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Page(s) associée(s)

Référence :Propriété filter de CSS

Référence :Fonction CSS blur()

Référence :Fonction CSS brightness()

Référence :Fonction CSS contrast()

Référence :Fonction CSS drop-shadow()

Référence :Fonction CSS grayscale()

Référence :Fonction CSS hue-rotate()

Référence :Fonction CSS invert()

Référence :Fonction opacity() CSS

Référence :Fonction sepia() CSS