Propriété filter

La propriété filter applique à l'image d'arrière-plan un certain style artistique ou filtre. La propriété peut accepter comme valeurs des noms de styles artistiques, formés par la fonction filter ou none (annulation du filtre choisi).

Syntaxe

sélecteur {
	filter: style artistique ou none;
}

Exemple

Appliquons un filtre noir et blanc à notre image, et annulons-le au survol :

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

Voir aussi

la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la fonction blur,
qui floute l'arrière-plan
la fonction brightness,
qui définit la luminosité de l'arrière-plan
la fonction contrast,
qui définit le contraste de l'arrière-plan
la fonction drop-shadow,
qui applique une ombre portée à l'arrière-plan
la fonction hue-rotate,
qui fait tourner les teintes de l'arrière-plan
la fonction invert,
qui inverse les couleurs de l'arrière-plan
la fonction opacity,
qui définit l'opacité de l'arrière-plan
la fonction sepia,
qui transforme l'arrière-plan en sépia