LafonctionCSSgrayscale() convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur<filter-function>.

Exemple interactif

filter: grayscale(0);

filter: grayscale(0.2);

filter: grayscale(60%);

filter: grayscale(1);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

Syntaxe

grayscale(amount)

Paramètres

amountFacultatif

La quantité de l'image d'entrée convertie en niveaux de gris. Elle s'exprime en nombre (<number>) ou en pourcentage (<percentage>). Une valeur de100% convertit l'image entièrement en niveaux de gris, tandis qu'une valeur de0% laisse l'image inchangée. Les valeurs comprises entre0% et100% appliquent un effet linéairement proportionnel. La valeur initiale utilisée pourl'interpolation est0. La valeur par défaut est1.

Syntaxe formelle

<grayscale()> =
grayscale([<number>|<percentage>]?)

Exemples

Exemples de valeurs correctes pourgrayscale()

grayscale(0)     /* Aucun effet */grayscale(.7)    /* 70% en niveaux de gris */grayscale()      /* Complètement gris */grayscale(1)grayscale(100%)

Spécifications

Compatibilité des navigateurs

Voir aussi

Les autres fonctions<filter-function> pouvant être utilisées dans les valeurs des propriétésfilter etbackdrop-filter sont :

• blur()
• brightness()
• contrast()
• drop-shadow()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()