CSS filter Eigenschaft
Die CSS filter-Eigenschaft wendet Effekte auf Bilder an. Erfahren Sie mehr über Werte und sehen Sie die Auswirkungen in den Beispielen.
Die CSS-Eigenschaft filter wendet grafische Effekte – wie Weichzeichnen, Farbverschiebung oder Schatten – auf ein Element während der Darstellung an, ohne die zugrunde liegende Quelle zu verändern. Sie wird am häufigsten bei Bildern eingesetzt, funktioniert aber bei jedem Element, einschließlich Text, Hintergründen und SVG.
Dieses Kapitel behandelt jede Filterfunktion, die die Eigenschaft akzeptiert, wie man mehrere Filter in einer Deklaration kombiniert und die praktischen Fälle, in denen Filter den Alternativen überlegen sind.
Wann sollte die filter-Eigenschaft verwendet werden?
Greifen Sie auf filter zurück, wenn Sie einen visuellen Effekt wünschen, den der Browser aus den vorhandenen Pixeln des Elements berechnet:
- Ein Heldenbild abdunkeln oder einfärben hinter Text (
brightness,grayscale,sepia), anstatt das Asset in einem Bildbearbeitungsprogramm zu bearbeiten. - Einen Hintergrund weichzeichnen (
blur), damit Vordergrundinhalte lesbar bleiben. - Aufmerksamkeit beim Hover erzeugen, indem ein Graustufenfilter entfernt wird, um die volle Farbe zu enthüllen.
- Einen Schatten hinzufügen, der der Transparenz folgt mit
drop-shadow– im Gegensatz zubox-shadowumschließt er die Form innerhalb eines PNG/SVG und nicht die rechteckige Box.
Da Filter auf der GPU laufen und nur die Darstellung beeinflussen, lassen sie sich reibungslos animieren und verändern die Quelldatei nie – was sie ideal für Übergänge und Hover-Zustände macht.
Die filter-Eigenschaft akzeptiert folgende Funktionen:
noneblur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbt | Nein. |
| Animierbar | Ja. |
| Version | CSS3 |
| DOM-Syntax | object.style.filter = "hue-rotate(360deg)"; |
Syntax
Syntax der CSS filter-Eigenschaft
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Beispiele
Beispiel der filter-Eigenschaft mit dem Wert „blur":
Beispiel der CSS filter-Eigenschaft mit dem blur-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: blur(3px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "blur(3px)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Ergebnis
Beispiel der filter-Eigenschaft zum Aufhellen des Bildes:
Beispiel der CSS filter-Eigenschaft mit dem brightness-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: brightness(150%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter property example</h2>
<p>For this image the filter is set to "brightness(150%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Im folgenden Beispiel macht der Wert „grayscale" das Bild grau:
Beispiel der filter-Eigenschaft mit dem Wert „grayscale":
Beispiel der CSS filter-Eigenschaft mit dem grayscale-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(80%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "grayscale(80%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Hier wird der „saturate"-Filter auf das Bild angewendet, wobei der angegebene Wert 300 % beträgt.
Beispiel der filter-Eigenschaft mit dem Wert „saturate":
Beispiel der CSS filter-Eigenschaft mit dem saturate-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: saturate(300%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "saturate(300%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „sepia":
Beispiel der filter-Eigenschaft mit dem sepia-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: sepia(70%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "sepia(70%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „contrast":
Beispiel der CSS filter-Eigenschaft mit dem contrast-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: contrast(40%);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "contrast(40%)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „opacity":
Beispiel der CSS filter-Eigenschaft mit dem Wert „opacity"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: opacity(0.4);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "opacity(0.4)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „invert":
Beispiel der CSS filter-Eigenschaft mit dem Wert „invert"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: invert(0.7);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "invert(0.7)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „hue-rotate":
Beispiel der CSS filter-Eigenschaft mit dem Wert „hue-rotate"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: hue-rotate(90deg);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "hue-rotate(90deg)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel der filter-Eigenschaft mit dem Wert „drop-shadow":
drop-shadow() nimmt dieselben Argumente wie die Eigenschaft box-shadow – offset-x, offset-y, einen optionalen Weichzeichnungsradius und eine Farbe –, folgt jedoch der nicht transparenten Form des Bildes statt seiner Begrenzungsbox. Deshalb ist es die richtige Wahl für PNG-Icons und SVGs mit Transparenz.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: drop-shadow(8px 8px 10px gray);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>For this image the filter is set to "drop-shadow(8px 8px 10px gray)".</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Mehrere Filter kombinieren
Sie können mehrere Filterfunktionen in einer einzigen Deklaration anwenden, indem Sie sie durch Leerzeichen getrennt auflisten. Sie werden in der angegebenen Reihenfolge angewendet, sodass das Ergebnis einer Funktion in die nächste einfließt – eine andere Reihenfolge kann die Ausgabe verändern.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
filter: grayscale(100%) brightness(120%) blur(2px);
max-width: 100%;
}
</style>
</head>
<body>
<h2>Filter example</h2>
<p>
This image is first turned to grayscale, then brightened, then blurred.
</p>
<p>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Da filter animierbar ist, ist die Kombination mit einem transition ein gängiges Muster – zum Beispiel das Überblenden eines Graustufenfotos in volle Farbe beim Hover:
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}Was zu beachten ist
- Ein Filter erzeugt einen Stapelkontext und (bei allem anderen als
none) einen umgebenden Block für Nachfahren – dies kann sich darauf auswirken, wie absolut positionierte undfixedKindelemente angeordnet werden. - Hohe
blur()-Werte sind aufwendig. Große Weichzeichnungsradien auf großen Elementen können die Scroll-Performance beeinträchtigen, besonders auf Mobilgeräten. opacity()vs. die Eigenschaftopacity: Die Filterfunktion wendet Deckkraft als Teil der Filter-Pipeline an, während die eigenständigeopacity-Eigenschaft einfacher und etwas breiter unterstützt wird – bevorzugen Sie die Eigenschaft, es sei denn, Sie kombinieren sie mit anderen Filtern.- Um zu filtern, was sich hinter einem halbtransparenten Element befindet (Milchglas-Effekt), benötigen Sie
backdrop-filter, eine separate Eigenschaft –filterbetrifft nur die eigenen Pixel des Elements.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| none | Wendet keinen Effekt an. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| blur | Wendet Weichzeichnung auf ein Bild an. Er wird durch einen Längenwert angegeben. Je größer der Wert, desto stärker die Weichzeichnung. Wenn kein Wert angegeben wird, wird 0 verwendet. | Ausprobieren » |
| brightness | Macht das Bild heller. Bei einem Wert von 0 wird das Bild schwarz. 100 % ist der Standardwert und zeigt das Originalbild. Werte über 100 % machen das Bild heller. | Ausprobieren » |
| contrast | Passt den Kontrast eines Bildes an. Bei einem Wert von 0 wird das Bild schwarz. 100 % ist der Standardwert und zeigt das Originalbild. Werte über 100 % erhöhen den Kontrast des Bildes. | Ausprobieren » |
| drop-shadow | Wendet einen Schlagschatten-Effekt auf das Bild an. | Ausprobieren » |
| grayscale | Konvertiert das Bild in Graustufen. 0 % entspricht dem Originalbild. 100 % macht das Bild grau. Negative Werte sind nicht erlaubt. | Ausprobieren » |
| hue-rotate | Wendet einen Farbtonrotations-Effekt auf das Bild an. Er wird in Grad angegeben. Der maximale Wert beträgt 360 Grad. | Ausprobieren » |
| invert | Invertiert die Farbwerte im Bild. 0 ist der Standardwert. 100 % macht das Bild vollständig invertiert. | Ausprobieren » |
| opacity | Legt den Deckkraftgrad für das Bild fest. Es beschreibt die Transparenz des Bildes. Bei einem Wert von 0 ist das Bild vollständig transparent. 100 % entspricht dem aktuellen Zustand des Bildes. | Ausprobieren » |
| saturate | Wendet einen Sättigungs-Effekt auf das Bild an. 0 % macht das Bild vollständig ungesättigt. 100 % ist der Standardwert des Bildes. Werte über 100 % machen das Bild übersättigt. | Ausprobieren » |
| sepia | Konvertiert das Bild in Sepia. Der Standardwert ist 0 %, 100 % macht das Bild vollständig sepiafarben. | Ausprobieren » |
| url | Die Funktion url() nimmt den Speicherort einer SVG-Datei entgegen, die einen Filter angibt, und kann einen Anker zu einem bestimmten Filterelement enthalten. | |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |