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.
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
grayscale(amount)
Parameter
amountOptional-
Menge des Eingabebildes, die in Graustufen umgewandelt wird. Sie wird als
<number>oder<percentage>angegeben. Ein Wert von100%verändert das Eingabebild vollständig zu Graustufen, während ein Wert von0%das Eingabebild unverändert lässt. Werte zwischen0%und100%haben lineare Multiplikatoren auf den Effekt. Der Anfangswert, der für die Interpolation verwendet wird, ist0. Der Standardwert ist1.
Formale Syntax
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
Beispiele
Beispiele für korrekte Werte für grayscale()
grayscale(0) /* No effect */
grayscale(.7) /* 70% grayscale */
grayscale() /* Completely grayscale */
grayscale(1)
grayscale(100%)
Spezifikationen
| Spezifikation |
|---|
| Filter Effects Module Level 1 # funcdef-filter-grayscale |
Browser-Kompatibilität
Siehe auch
Die anderen <filter-function> Funktionen, die in Werten der Eigenschaften filter und backdrop-filter verwendet werden können, sind: