Funzione CSS invert()
- Pagina precedente Funzione CSS inset()
- Pagina successiva Funzione CSS lab()
- Torna alla pagina precedente Manuale di Funzione CSS
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%); }
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; }
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()
- Pagina precedente Funzione CSS inset()
- Pagina successiva Funzione CSS lab()
- Torna alla pagina precedente Manuale di Funzione CSS