Egenskapen filter

Egenskapen filter applicerar bakgrundsbilden en specifik konstnärlig stil eller ett filter. Egenskapen kan ta som värden namn på konstnärliga stilar, bildade av funktionen filter eller none (avbryt det valda filtret).

Syntax

selektor {
	filter: konstnärlig stil eller none;
}

Exempel

Låt oss sätta ett svartvitt filter på vår bild, och avbryta det vid hovring:

<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 även

egenskapen background,
som är en sammanfattande egenskap för bakgrunden
funktionen blur,
som oskärper bakgrunden
funktionen brightness,
som sätter ljusstyrkan på bakgrunden
funktionen contrast,
som sätter kontrasten på bakgrunden
funktionen drop-shadow,
som sätter en skugga på bakgrunden
funktionen hue-rotate,
som sätter färgtonen på bakgrunden
funktionen invert,
som inverterar bakgrundens färger
funktionen opacity,
som sätter transparensen på bakgrunden
funktionen sepia,
som omvandlar bakgrunden till sepia