Fonction grayscale() CSS

Définition et utilisation

CSS grayscale() La fonction de filtre convertit l'image en niveaux de gris.

  • 100% (ou 1) rend l'image complètement en niveaux de gris
  • 0% (ou 0) n'a pas d'effet

Exemple

Exemple 1

Définir différentes valeurs de gris pour les images :

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

Essayez-le vous-même

Exemple 2

convertit grayscale() et backdrop-filter Utilisation combinée des propriétés :

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

Essayez-le vous-même

Syntaxe CSS

grayscale(amount)
Valeur Description
amount

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

100% (ou 1) rend l'élément complètement en niveaux de gris.

0% (ou 0) représente l'image originale (sans effet).

La valeur par défaut est 1.

Détails techniques

Version : Module de 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 pleinement la fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pages associées

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

Référence :Fonction blur() CSS

Référence :Fonction brightness() CSS

Référence :Fonction contrast() CSS

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

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

Référence :Fonction invert() CSS

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS