Funzione opacity

La funzione opacity permette di modificare la trasparenza di un'immagine di sfondo. Il valore 100% o 1 mantiene la trasparenza originale dell'immagine. Il valore 0 indica che l'immagine diventerà completamente trasparente. Qualsiasi numero compreso in questo intervallo imposta una trasparenza parziale dello sfondo. Non è possibile impostare un valore negativo. Il valore predefinito è 1.

Sintassi

cssselettore {
  filter: opacity(numero);
}

Esempio

Impostiamo la trasparenza della nostra immagine al 50%:

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

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

Результат:

Esempio

Ora impostiamo la trasparenza al 100%:

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

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

Результат:

Esempio

Ora impostiamo nella funzione opacity un valore pari a 0:

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

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

Результат:

Vedi anche