grayscale()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Die grayscale() CSS Funktion konvertiert das Eingabebild in Graustufen. Das Ergebnis ist eine <filter-function>.

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

css

grayscale(amount)

Parameter

amount Optional: Der Anteil des Eingabebildes, der in Graustufen konvertiert wird. Dieser wird als <number> oder <percentage> angegeben. Ein Wert von 100% ändert das Eingabebild vollständig in Graustufen, während ein Wert von 0% das Eingabebild unverändert lässt. Werte zwischen 0% und 100% haben lineare Multiplikatoren auf den Effekt. Der anfängliche Wert für Interpolation ist 0. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Beispiele für korrekte Werte für grayscale()

css

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

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

Spezifikationen

Specification
Filter Effects Module Level 1 # funcdef-filter-grayscale

Browser-Kompatibilität

Siehe auch

Die anderen <filter-function> Funktionen, die in den Werten der filter und backdrop-filter Eigenschaften verwendet werden können, sind: