Proprietà filter

La proprietà filter applica un determinato stile artistico o filtro all'immagine di sfondo. La proprietà può accettare come valori i nomi degli stili artistici, formati dalla funzione filter o none (annulla il filtro selezionato).

Sintassi

selettore {
	filter: stile artistico o none;
}

Esempio

Applichiamo alla nostra immagine un filtro in bianco e nero, e al passaggio del mouse annulliamolo:

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

Vedi anche

la proprietà background,
che è una proprietà abbreviata per lo sfondo
la funzione blur,
che sfoca lo sfondo
la funzione brightness,
che imposta la luminosità dello sfondo
la funzione contrast,
che imposta il contrasto dello sfondo
la funzione drop-shadow,
che applica un'ombra allo sfondo
la funzione hue-rotate,
che modifica la tonalità di colore dello sfondo
la funzione invert,
che inverte i colori dello sfondo
la funzione opacity,
che imposta la trasparenza dello sfondo
la funzione sepia,
che trasforma lo sfondo in seppia