Funzione CSS invert()

Definizione e uso

CSS invert() La funzione di filtro viene utilizzata per invertire i colori dell'immagine.

  • 100% (1) invertirà completamente l'immagine
  • 0% (0) non avrà alcun effetto

Esempio

Esempio 1

Invertire i colori dell'immagine:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

Prova da solo

Esempio 2

per invert() con backdrop-filter Utilizzare insieme gli attributi:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Prova da solo

Sintassi CSS

invert(amount)
Valore Descrizione
amount

Opzionale. Specificare la degree di inversione, può essere un numero o una percentuale.

100% (1) invertirà completamente l'elemento, 0% (0) rappresenta l'immagine originale (nessun effetto).

Il valore predefinito è 0.

Dettagli tecnici

Versione: Modulo degli Effetti di Filtro CSS Livello 1

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pagina correlata

Riferimento:Proprietà filter CSS

Riferimento:Funzione CSS blur()

Riferimento:Funzione CSS brightness()

Riferimento:Funzione CSS contrast()

Riferimento:Funzione CSS drop-shadow()

Riferimento:Funzione CSS grayscale()

Riferimento:Funzione CSS hue-rotate()

Riferimento:Funzione CSS opacity()

Riferimento:Funzione CSS saturate()

Riferimento:Funzione CSS sepia()