De eigenschap filter

De eigenschap filter geeft een afbeelding op de achtergrond een bepaalde artistieke stijl of filter. De eigenschap kan als waarden de namen van artistieke stijlen aannemen, gevormd door de functie filter of none (annulering van het gekozen filter).

Syntaxis

selector {
	filter: artistieke stijl of none;
}

Voorbeeld

Laten we een zwart-wit filter instellen voor onze afbeelding, en het bij hover annuleren:

<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;
}

Zie ook

de eigenschap background,
die een korte notatie is voor de achtergrond
de functie blur,
die de achtergrond vervaagt
de functie brightness,
die de helderheid van de achtergrond instelt
de functie contrast,
die het contrast van de achtergrond instelt
de functie drop-shadow,
die een schaduw aan de achtergrond toevoegt
de functie hue-rotate,
die de kleurtoon van de achtergrond instelt
de functie invert,
die de kleuren van de achtergrond inverteert
de functie opacity,
die de transparantie van de achtergrond instelt
de functie sepia,
die de achtergrond omzet naar sepiakleuren