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

selettore {
	filter: opacity(numero);
}

Esempio

Impostiamo la trasparenza della nostra immagine al 50%:

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

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

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

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

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

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

Vedi anche

funzione blur,
che sfoca lo sfondo
funzione brightness,
che imposta la luminosità dello sfondo
funzione contrast,
che imposta il contrasto dello sfondo
funzione drop-shadow,
che imposta un'ombra allo sfondo
funzione hue-rotate,
che imposta la tonalità di colore dello sfondo
funzione invert,
che inverte i colori dello sfondo
funzione sepia,
che converte lo sfondo in seppia
proprietà background,
che è una proprietà abbreviata per lo sfondo
proprietà background-image,
con la quale si può impostare un'immagine di sfondo a un blocco