grayscale()

Exemple interactif

filter: grayscale(0);

filter: grayscale(0.2);

filter: grayscale(60%);

filter: grayscale(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntaxe

grayscale(amount)

Paramètres

amount Facultatif

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 de 100% convertit l'image entièrement en niveaux de gris, tandis qu'une valeur de 0% laisse l'image inchangée. Les valeurs comprises entre 0% et 100% appliquent un effet linéairement proportionnel. La valeur initiale utilisée pour l'interpolation est 0. La valeur par défaut est 1.

Syntaxe formelle

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

Exemples

Exemples de valeurs correctes pour grayscale()

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és filter et backdrop-filter sont :

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