<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 Erscheinungsbild eines Eingabebildes verändern kann. Er wird in den Eigenschaften filter
und backdrop-filter
verwendet.
Syntax
Der <filter-function>
Datentyp wird mit einer der unten aufgeführten Filterfunktionen angegeben. Jede Funktion erfordert ein Argument, das, wenn es ungültig ist, dazu führt, dass kein Filter angewendet wird.
blur()
-
Verwässert das Bild.
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 Gesamtfarbton des Bildes.
invert()
-
Kehrt die Farben des Bildes um.
opacity()
-
Macht das Bild transparent.
saturate()
-
Über-saturiert 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 bietet eine einfache Grafik zusammen mit einem Auswahlmenü, das Ihnen ermöglicht, zwischen den verschiedenen Arten von Filterfunktionen zu wählen, und einem Schieberegler, mit dem Sie die in der Filterfunktion verwendeten Werte variieren können. Die Aktualisierung der Steuerelemente aktualisiert den Filtereffekt in Echtzeit und ermöglicht es Ihnen, die Effekte verschiedener Filter zu untersuchen.
div {
width: 100%;
height: 512px;
background: url(fx-nightly-512.png);
background-repeat: no-repeat;
background-position: center center;
filter: <filter-function>(<value>);
}
Wo der <filter-function>
der von Ihnen aus dem Dropdown-Menü ausgewählte Filter ist und der <value>
die von Ihnen mit dem Schieberegler festgelegten Werte sind:
<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
BCD tables only load in the browser
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
filter
undbackdrop-filter