Egenskaben filter

Egenskaben filter giver billedbaggrunden en bestemt kunstnerisk stil eller filter. Egenskaben kan tage som værdier navnene på kunstneriske stile, dannet af funktionen filter eller none (annullering af det valgte filter).

Syntaks

selektor {
	filter: kunstnerisk stil eller none;
}

Eksempel

Lad os give vores billede et sort-hvidt filter, og annullere det ved hover:

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

Se også

egenskaben background,
som er en sammentrækningsegenskab for baggrunden
funktionen blur,
som slører baggrunden
funktionen brightness,
som giver lysstyrke til baggrunden
funktionen contrast,
som giver kontrast til baggrunden
funktionen drop-shadow,
som giver skygge til baggrunden
funktionen hue-rotate,
som giver farvetone til baggrunden
funktionen invert,
som inverterer baggrundens farver
funktionen opacity,
som giver gennemsigtighed til baggrunden
funktionen sepia,
som omdanner baggrunden til sepia