Proprietatea filter

Proprietatea filter aplică imaginii de fundal un anumit stil artistic sau filtru. Proprietatea poate accepta ca valori nume de stiluri artistice, formate cu funcția filter sau none (anularea filtrului selectat).

Sintaxă

selector {
	filter: stil artistic sau none;
}

Exemplu

Să aplicăm imaginii noastre un filtru alb-negru, iar la hover să-l anulăm:

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

Vedeți și

proprietatea background,
care este o proprietate scurtă pentru fundal
funcția blur,
care estompează fundalul
funcția brightness,
care definește luminozitatea fundalului
funcția contrast,
care definește contrastul fundalului
funcția drop-shadow,
care adaugă umbră fundalului
funcția hue-rotate,
care definește nuanța culorii fundalului
funcția invert,
care inversează culorile fundalului
funcția opacity,
care definește transparența fundalului
funcția sepia,
care transformă fundalul în sepia