Opacità - Trucchi CSS | CSS Almanac 2025

La opacityproprietà in CSS specifica quanto è trasparente un elemento.

Uso di base:

div ( opacity: 0.5; )

L'opacità ha un valore iniziale predefinito di 1 (100% opaco). L'opacità non viene ereditata, ma perché il genitore ha un'opacità che si applica a tutto ciò che contiene. Non puoi rendere un elemento figlio meno trasparente del genitore, senza qualche trucco. I valori sono un numero compreso tra 0 e 1 che rappresenta l'opacità del canale (il canale "alfa"). Quando un elemento ha un valore di 0, l'elemento è completamente invisibile; un valore di 1 è completamente opaco (solido).

Dai un'occhiata a questa penna!

Compatibilità con IE

Se vuoi che l'opacità funzioni in tutte le versioni di IE, l'ordine dovrebbe essere il seguente:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Se non usi questo ordine, IE8-as-IE7 non applica l'opacità, sebbene IE8 e un IE7 puro lo facciano.

Nota sui contesti di impilamento

Se viene posizionato un elemento con opacitye un valore minore di 1, la z-indexproprietà si applica come descritto in CSS2.1, tranne per il fatto che il autovalore viene trattato come 0 poiché viene sempre creato un nuovo contesto di impilamento.

Opacity può essere utilizzato in alternativa alla visibilityproprietà: visibility: hidden;è proprio come opacity: 0;.