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

cssselettore {
  filter: invert(numero);
}

Esempio

Invertiamo i colori della nostra immagine fino a un valore di 50%:

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

css#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%:

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

css#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:

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

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

Результат:

Vedi anche