CSS-Filter-Eigenschaft
Die Eigenschaft filter wird verwendet, um einem Element visuelle Effekte anzuwenden (Bild). Die Eigenschaft filter hat die folgenden Werte:
- none
- blur
- 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-Eigenschaft filter
css
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;Beispiel für die Eigenschaft filter:
Beispiel der CSS-Eigenschaft filter mit dem Wert blur
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Ergebnis
Beispiel für die Verwendung der Eigenschaft filter, um das Bild heller zu machen:
Beispiel der CSS-Eigenschaft filter mit dem Wert brightness
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>In den folgenden Beispielen macht der Wert „grayscale“ das Bild grau:
Beispiel für die Eigenschaft filter mit dem Wert „grayscale“:
Beispiel der CSS-Eigenschaft filter mit dem Wert grayscale
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Hier wird auf das Bild der Filter „saturate“ mit dem Wert 300% angewendet.
Beispiel für die Eigenschaft filter mit dem Wert „saturate“:
Beispiel der CSS-Eigenschaft filter mit dem Wert saturate
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel für die Eigenschaft filter mit dem Wert „sepia“:
Beispiel der Eigenschaft filter mit dem Wert sepia
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel für die Eigenschaft filter mit dem Wert „contrast“:
Beispiel der CSS-Eigenschaft filter mit dem Wert contrast
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel für die Eigenschaft filter mit dem Wert „opacity“:
Beispiel der CSS-Eigenschaft filter mit dem Wert opacity
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel für die Eigenschaft filter mit dem Wert „invert“:
Beispiel der CSS-Eigenschaft filter mit dem Wert invert
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Beispiel für die Eigenschaft filter mit dem Wert „hue-rotate“:
Beispiel der CSS-Eigenschaft filter mit dem Wert hue-rotate
html
<!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="https://de.w3docs.com/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Background Image" />
</p>
</body>
</html>Werte
| Wert | Beschreibung | Play it |
|---|---|---|
| none | Wendet keinen Effekt an. Dies ist der Standardwert dieser Eigenschaft. | Play it » |
| blur | Wendet einen Unschärfeeffekt auf ein Bild an. Er wird durch einen Längenwert angegeben. Je größer der Wert, desto stärker die Unschärfe. Wenn kein Wert angegeben wird, wird 0 verwendet. | Play it » |
| brightness | Macht das Bild heller. Wenn der Wert 0 ist, wird das Bild schwarz. 100% ist der Standardwert und zeigt das ursprüngliche Bild. Werte über 100% machen das Bild heller. | Play it » |
| contrast | Passt den Kontrast eines Bildes an. Wenn der Wert 0 ist, wird das Bild schwarz. 100% ist der Standardwert und zeigt das ursprüngliche Bild. Werte über 100% wenden mehr Kontrast auf das Bild an. | Play it » |
| drop-shadow | Wendet einen Schlagschatteneffekt auf das Bild an. | Play it » |
| grayscale | Wandelt das Bild in Graustufen um. 0% ist der Wert des ursprünglichen Bildes. 100% macht das Bild grau. Negative Werte sind nicht erlaubt. | Play it » |
| hue-rotate | Wendet einen Farbtonrotations-Effekt auf das Bild an. Er wird in Grad angegeben. Der Maximalwert beträgt 360 Grad. | Play it » |
| invert | Invertiert die Bildwerte. 0 ist der Standardwert. 100% macht das Bild vollständig invertiert. | Play it » |
| opacity | Legt den Deckkraftwert für das Bild fest. Er beschreibt die Transparenz des Bildes. Wenn der Wert 0 ist, ist das Bild vollständig transparent. 100% ist der aktuelle Zustand des Bildes. | Play it » |
| saturate | Wendet einen Sättigungseffekt auf das Bild an. 0% macht das Bild vollständig entsättigt. 100% ist der Standardwert des Bildes. Werte über 100% machen das Bild übersättigt. | Play it » |
| sepia | Wandelt das Bild in Sepia um. Der Standardwert ist 0%, 100% macht das Bild vollständig sepiafarben. | Play it » |
| url | Die Funktion url() nimmt den Pfad zu einer SVG-Datei auf, die einen Filter definiert, und kann einen Anker zu einem bestimmten Filterelement enthalten. | |
| initial | Verwendet für die Eigenschaft ihren Standardwert. | |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
What are the different types of effects that can be achieved using the CSS filter property?