`grayscale()`-CSS-Funktion

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion grayscale() wandelt das Eingabebild in Graustufen um. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

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

/* No grayscale conversion */
grayscale(0)

/* Complete grayscale conversion */
grayscale()
grayscale(1)
grayscale(100%)

/* 60% grayscale conversion */
grayscale(.6)
grayscale(60%)

Parameter

<number> oder <percentage> Optional: Gibt den Grad der Umwandlung an. Bei einem Wert von 100% wird das Eingabebild vollständig in Graustufen umgewandelt, während es bei 0% unverändert bleibt. Werte zwischen 0% und 100% skalieren den Effekt linear. Werte über 100% sind zulässig, der Effekt wird jedoch auf 100% begrenzt. Der Anfangswert für die Interpolation ist 0. Der Standardwert ist 1.

Formale Syntax

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

Beispiele

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: eines mit angewendeter grayscale()-Filterfunktion, eines mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Das SVG-Filterelement <feColorMatrix> kann ebenfalls verwendet werden, um Inhalte in Graustufen umzuwandeln. Wir legen die values für die Farbmatrix fest und können anschließend über die ID des <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="grayscale70" color-interpolation-filters="sRGB">
    <feColorMatrix
      type="matrix"
      values="0.44882 0.50064 0.05054 0 0
              0.14882 0.80064 0.05054 0 0
              0.14882 0.50064 0.35054 0 0
              0 0 0 1 0" />
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: grayscale(0.7);
filter: grayscale(70%);
filter: url("#grayscale70"); /* with embedded SVG */
filter: url("fileName.svg#grayscale70"); /* external SVG */

CSS

Wir verwenden CSS, um Elemente anhand ihrer Klasse css-filter oder svg-filter in Graustufen umzuwandeln:

css

.css-filter {
  filter: grayscale(0.7);
}

.svg-filter {
  filter: url("#grayscale70");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>grayscale()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Modul CSS-Filtereffekte
Weitere <filter-function>-Funktionen, die als Werte für die Eigenschaften filter und backdrop-filter verwendet werden können:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

grayscale()-CSS-Funktion

SVG

CSS

Help improve MDN

`grayscale()`-CSS-Funktion