grayscale()-CSS-Funktion

Probieren Sie es aus

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>

Syntax

grayscale(amount)

Parameter

amount Optional

Anteil des Eingabebilds, der in Graustufen umgewandelt wird. Er wird als <number> oder <percentage> angegeben. Ein Wert von 100% wandelt das Eingabebild vollständig in Graustufen um, während ein Wert von 0% das Eingabebild unverändert lässt. Werte zwischen 0% und 100% skalieren den Effekt linear. Werte über 100% sind zulässig, der Effekt wird jedoch auf 100% begrenzt. Negative Werte sind nicht zulässig. Der für die Interpolation verwendete Anfangswert ist 0. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Beispiele für gültige Werte von grayscale()

grayscale(0)     /* No effect */
grayscale(.7)    /* 70% grayscale */

grayscale()      /* Completely grayscale */
grayscale(1)
grayscale(100%)

Spezifikationen

Browser-Kompatibilität

Siehe auch

Zu den weiteren <filter-function>-Funktionen, die als Werte der Eigenschaften filter und backdrop-filter verwendet werden können, gehören:

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