Funzione CSS opacity()

Definizione e uso

CSS opacity() Le funzioni di filtro applicano un effetto di trasparenza agli elementi.

  • 100% (o 1) non ha effetto
  • 50% (o 0.5) rende l'elemento 50% trasparente
  • 0% (o 0) rende l'elemento completamente trasparente

Esempio

Esempio 1

Imposta diverse trasparenze per le immagini:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

Prova personalmente

Esempio 2

applica opacity() e backdrop-filter Utilizzo contemporaneo degli attributi:

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

Prova personalmente

Sintassi CSS

opacity(amount)
Valore Descrizione
amount

Opzionale. Specificare un valore numerico o percentuale di trasparenza. 0% (o 0) rende l'elemento completamente trasparente.

100% (o 1) rappresenta l'immagine originale (nessun effetto). Il valore predefinito è 1.

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 invert()

Riferimento:Funzione saturate() CSS

Riferimento:Funzione sepia() CSS