Funzione invert

La funzione invert permette di invertire i colori in un'immagine di sfondo. Il valore 0 indica che l'immagine rimane originale. Il valore 100% o 1 inverte completamente i colori dello sfondo. Qualsiasi numero compreso in questo intervallo inverte parzialmente i colori. Non è possibile impostare un valore negativo. Per impostazione predefinita, il valore è 0.

Sintassi

selettore {
	filter: invert(numero);
}

Esempio

Invertiamo i colori della nostra immagine fino a un valore di 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;
}

Esempio

E ora invertiamo completamente i colori della nostra immagine con un valore di 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;
}

Esempio

E ora impostiamo nella funzione invert un valore pari a 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;
}

Vedi anche

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 aggiunge un'ombra allo sfondo
la funzione hue-rotate,
che imposta la tonalità di colore dello sfondo
la funzione opacity,
che imposta la trasparenza dello sfondo
la funzione sepia,
che converte lo sfondo in seppia
la proprietà background,
che è una proprietà abbreviata per lo sfondo
la proprietà background-image,
con la quale si può assegnare un'immagine di sfondo a un blocco
la proprietà filter,
che imposta lo stile per lo sfondo