CSS Opacità (Opacità)

L'attributo CSS opacity specifica la trasparenza dell'elemento. L'attributo opacity specifica la trasparenza di un elemento. In altre parole, l'attributo opacity specifica la copertura del retro del background dell'elemento.

Trasparenza cross-browser

Ora, la trasparenza (opacity) fa parte della specifica CSS3, ma esiste da molto tempo. Tuttavia, i browser più vecchi hanno modi diversi per specificare la trasparenza o l'opacità.

Trasparenza CSS in Firefox, Safari, Chrome, Opera e IE9

Questo è il linguaggio grammaticale più recente della trasparenza CSS in tutti i browser attuali.

p {
　　　　opacity: 0.7;
}

La regola di stile sopra renderà l'elemento paragrafo al 70% opaco (o al 30% trasparente).

Il valore della proprietà opacity va da 0.0 a 1.0. Impostare opacity: 1; rende l'elemento completamente opaco (cioè 0% trasparente), mentre opacity: 0; rende l'elemento completamente trasparente (cioè 100% trasparente).

Metodo di implementazione della trasparenza CSS in Internet Explorer 8 e versioni precedenti

Internet Explorer 8 e versioni precedenti supportano il proprietario di Microsoft "alpha filter" per specificare l'opacità degli elementi.

p {
　　　　filter: alpha(opacity=50);
　　　　zoom: 1; /* Correzione per IE7 */
}

Opacità CSS compatibile con tutti i browser

Combinate le due fasi precedenti, otterraitutti i browserdeiCodice di trasparenza.

p {
　　　　opacity: 0.5; /* Opacità per browser moderni */
　　　　filter: alpha(opacity=50); /* Opacità per IE8 e versioni inferiori */
　　　　zoom: 1; /* Correzione per IE7 */
}

Trasparenza delle immagini CSS

Puoi anche creare immagini trasparenti utilizzando CSS Opacity.

Le tre immagini nella figura sottostante provengono dalla stessa immagine di origine. L'unica differenza tra loro è la loro trasparenza.

Cambiare l'opacità dell'immagine quando il mouse è sopra

Esempi seguenti dimostrano l'uso comune della trasparenza delle immagini CSS, dove, quando il puntatore del mouse viene mosso sull'immagine, la trasparenza dell'immagine cambia.

—Spostare il puntatore del mouse sull'immagine per vedere l'effetto.

Testo nel riquadro trasparente

Quando si utilizza l'opacità sugli elementi, non solo lo sfondo dell'elemento avrà la trasparenza, ma anche tutti i suoi elementi figli diventeranno trasparenti. Se il valore dell'opacità aumenta, il testo all'interno dell'elemento trasparente sarà difficile da leggere.

Per prevenire questo, puoi utilizzare un'immagine PNG trasparente o posizionare il blocco di testo al di fuori del riquadro trasparente e utilizzare un negativoMargineoPosizionamento CSSSpostare visivamente all'interno.

div {
　　　　float: left;
　　　　opacity: 0.7;
　　　　border: 1px solid #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margin-left: -400px;
}

Trasparenza CSS con RGBA

Oltre al RGB, CSS3 ha introdotto un nuovo metodo RGBA per specificare un colore, che include la trasparenza alpha come parte del valore del colore. RGBA rappresenta Rosso, Blu, Verde, Alpha.

La dichiarazione RGBA è un metodo molto semplice per impostare l'opacità del colore.

div {
　　　　background: rgba(200, 54, 54, 0.5);
}
p {
　　　　color: rgba(200, 54, 54, 0.25);
}

I primi tre numeri rappresentano i valori RGB del colore, ossia rosso (0-255), verde (0-255), blu (0-255), mentre il quarto numero rappresenta un valore di opacità alpha tra 0 e 1 (0 rende il colore completamente trasparente, mentre il valore 1 lo rende completamente opaco).

Una caratteristica importante da notare riguardo all'opacità RGBA è la capacità di specificare l'opacità di un singolo colore. Utilizzando RGBA, possiamo rendere trasparente il colore del testo dell'elemento mantenendo lo sfondo completo.

oppure ignora il colore del testo, cambiando solo l'opacità dello sfondo.

Vedrai che è facile specificare un singolo colore con RGBA invece dell'opacità dell'intero elemento. Tuttavia, è sempre consigliabile definire un colore di riserva per i browser che non supportano RGBA.

Colore di riserva dichiarato RGBA

Tutti i browser non supportano i colori RGBA. Ma, puoi fornire altre opzioni per i browser non supportati, come immagini PNG monocromatiche o trasparenti.

p {
　　　　/* Fallback per browser web che non supportano RGBA */
　　　　background: rgb(0, 0, 0);
　　　　/* RGBA con 0.5 di opacità */
　　　　background: rgba(0, 0, 0, 0.5);
}