Eigenschaft filter

Die Eigenschaft filter weist dem Hintergrundbild einen bestimmten künstlerischen Stil oder Filter zu. Die Eigenschaft kann als Werte die Namen von künstlerischen Stilen, die durch die Funktion filter gebildet werden, oder none (Aufhebung des gewählten Filters) annehmen.

Syntax

Selektor {
	filter: künstlerischer Stil oder none;
}

Beispiel

Lassen Sie uns für unser Bild einen Schwarz-Weiß- Filter festlegen und ihn bei Überfahren mit der Maus aufheben:

<div id="elem"></div>

#elem {
	filter: grayscale(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
#elem:hover {
	filter: none;
}

Siehe auch

die Eigenschaft background,
die eine Kurzform-Eigenschaft für den Hintergrund darstellt
die Funktion blur,
die den Hintergrund unscharf macht
die Funktion brightness,
die die Helligkeit des Hintergrunds festlegt
die Funktion contrast,
die den Kontrast des Hintergrunds festlegt
die Funktion drop-shadow,
die dem Hintergrund einen Schlagschatten hinzufügt
die Funktion hue-rotate,
die die Farbton des Hintergrunds verändert
die Funktion invert,
die die Farben des Hintergrunds invertiert
die Funktion opacity,
die die Transparenz des Hintergrunds festlegt
die Funktion sepia,
die den Hintergrund in Sepia umwandelt