Funcția invert

Funcția invert permite inversarea culorilor în imaginea de fundal. Valoarea 0 indică că imaginea rămâne originală. Valoarea 100% sau 1 inversează complet culorile fundalului. Orice număr situat în acest interval inversează parțial culorile. Valoarea negativă nu poate fi setată. În mod implicit, valoarea este 0.

Sintaxă

selector {
	filter: invert(număr);
}

Exemplu

Să inversăm culorile imaginii noastre până la valoarea 50%:

<div id="elem"></div>

#elem {
	filter: invert(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplu

Și acum să inversăm culorile imaginii noastre până la valoarea 100%:

<div id="elem"></div>

#elem {
	filter: invert(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplu

Și acum să setăm în funcția invert valoarea egală cu 0:

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Vedeți și

funcția blur,
care estompează fundalul
funcția brightness,
care setează luminozitatea fundalului
funcția contrast,
care setează contrastul fundalului
funcția drop-shadow,
care setează umbra fundalului
funcția hue-rotate,
care seteaze nuanța culorii fundalului
funcția opacity,
care setează transparența fundalului
funcția sepia,
care transformă fundalul în sepia
proprietatea background,
reprezentând o proprietate prescurtată pentru fundal
proprietatea background-image,
cu care unui bloc i se poate seta o imagine de fundal
proprietatea filter,
care setează stilul pentru fundal