<filter-function>
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.
Der <filter-function>
CSS Datentyp repräsentiert einen grafischen Effekt, der das Aussehen eines Eingabebildes verändern kann. Er wird in den Eigenschaften filter
und backdrop-filter
verwendet.
Syntax
Der <filter-function>
-Datentyp wird mittels einer der unten aufgelisteten Filterfunktionen angegeben. Jede Funktion benötigt ein Argument, welches, falls es ungültig ist, dazu führt, dass kein Filter angewendet wird.
blur()
-
Macht das Bild unscharf.
brightness()
-
Macht das Bild heller oder dunkler.
contrast()
-
Erhöht oder verringert den Kontrast des Bildes.
drop-shadow()
-
Wendet einen Schlagschatten hinter dem Bild an.
grayscale()
-
Konvertiert das Bild in Graustufen.
hue-rotate()
-
Ändert den Gesamteindruck der Farbtöne des Bildes.
invert()
-
Kehrt die Farben des Bildes um.
opacity()
-
Macht das Bild transparent.
saturate()
-
Über-sättigt oder entsättigt das Eingabebild.
sepia()
-
Konvertiert das Bild in Sepia.
Formale Syntax
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<blur()> =
blur( <length>? )
<brightness()> =
brightness( [ <number> | <percentage> ]? )
<contrast()> =
contrast( [ <number> | <percentage> ]? )
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( [ <number> | <percentage> ]? )
<opacity()> =
opacity( [ <number> | <percentage> ]? )
<sepia()> =
sepia( [ <number> | <percentage> ]? )
<saturate()> =
saturate( [ <number> | <percentage> ]? )
Beispiele
Vergleich von Filterfunktionen
Dieses Beispiel zeigt eine einfache Grafik zusammen mit einem Auswahlmenü, mit dem Sie zwischen den verschiedenen Arten von Filterfunktionen wählen können, und einem Schieberegler, mit dem Sie die Werte innerhalb der Filterfunktion variieren können. Durch Ändern der Steuerelemente wird der Filtereffekt in Echtzeit aktualisiert, sodass Sie die Auswirkungen der verschiedenen Filter untersuchen können.
div {
width: 100%;
height: 512px;
background: url(fx-nightly-512.png);
background-repeat: no-repeat;
background-position: center center;
filter: <filter-function>(<value>);
}
Hierbei ist <filter-function>
der Filter, den Sie aus dem Dropdown-Menü auswählen, und <value>
die Werte, die Sie mit dem Schieberegler einstellen:
<div></div>
<ul>
<li>
<label for="filter-select">Choose a filter function:</label>
<select id="filter-select">
<option selected>blur</option>
<option>brightness</option>
<option>contrast</option>
<option>drop-shadow</option>
<option>grayscale</option>
<option>hue-rotate</option>
<option>invert</option>
<option>opacity</option>
<option>saturate</option>
<option>sepia</option>
</select>
</li>
<li><input type="range" /><output></output></li>
<li>
<p>Current value: <code></code></p>
</li>
</ul>
div {
width: 100%;
height: 512px;
background-image: url(https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png);
background-repeat: no-repeat;
background-position: center center;
}
li {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input {
width: 60%;
}
output {
width: 5%;
text-align: center;
}
select {
width: 40%;
margin-left: 2px;
}
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # typedef-filter-function |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<filter-function> | ||||||||||||
blur() | ||||||||||||
brightness() | ||||||||||||
contrast() | ||||||||||||
drop-shadow() | ||||||||||||
grayscale() | ||||||||||||
hue-rotate() | ||||||||||||
invert() | ||||||||||||
opacity() | ||||||||||||
saturate() | ||||||||||||
sepia() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
filter
undbackdrop-filter