Come aggiungere trasparenza in CSS usando la proprietà opacità?

La trasparenza può essere aggiunta agli elementi, come immagini e contenitori di div. Ai fini di rendere trasparente un elemento, viene utilizzata la proprietà di opacità CSS. Questa proprietà può rendere i valori da 0.0 a 1.0. In questo articolo, ti guideremo come aggiungere trasparenza agli elementi. Questo post copre i seguenti argomenti.

1. Come aggiungere trasparenza a un elemento
2. Aggiunta di un effetto hover insieme alla trasparenza
3. Come aggiungere trasparenza a un elemento
4. Aggiunta di trasparenza con RGBA

Iniziamo.

Come aggiungere trasparenza a un elemento

Puoi fare qualsiasi elemento (E.G. Immagine) che appare sul tuo sito Web trasparente, assegnando un certo valore alla proprietà Opacibilità CSS dell'elemento.

Esempio

Per comprendere il concetto di trasparenza, segui l'esempio seguente.

Html

Qui abbiamo aggiunto un'immagine e impostato la sua larghezza su 200px e altezza su 250px.

CSS

img
opacità: 0.6;

L'opacità dell'immagine è stata impostata su 0.6.

Produzione

L'immagine è del 60% opaca.

Nota: Opacità e trasparenza sono opposte l'una all'altra. Pertanto, i valori bassi della proprietà di opacità renderanno l'elemento più trasparente e viceversa.

Ad esempio, se diminuiamo l'opacità e la imposta su 0.2 come questo.

img
opacità: 0.2;

La trasparenza aumenterà.

L'immagine è del 20% opaca.

Aggiunta di un effetto hover insieme alla trasparenza

È possibile aggiungere un effetto hover insieme ad assegnare una certa opacità all'immagine. L'aggiunta di questo effetto cambierà la trasparenza di un'immagine quando l'utente porta il mouse su una particolare immagine.

Esempio

L'esempio seguente dimostra come utilizzare un effetto hover con la proprietà dell'opacità.

Html

Nel codice sopra, stiamo aggiungendo un'immagine e dandogli un po 'di larghezza e altezza.

CSS

img
opacità: 0.4;

img: hover
opacità: 1.0;

Nel codice CSS sopra, stiamo prima assegnando un'opacità di 0.4 Per rendere trasparente l'immagine, quindi stiamo aggiungendo un effetto hover all'immagine con opacità 1. Ciò significa che quando l'utente porta il mouse sull'immagine, non sarà trasparente e il contrario accadrà quando il cursore del mouse viene spostato dall'immagine.

Produzione

Un effetto hover viene aggiunto con successo all'immagine insieme alla trasparenza.

Come aggiungere trasparenza a un elemento e ai suoi figli

Usando la proprietà Opacità, quando si aggiunge trasparenza a un elemento, i bambini di quel particolare elemento ereditano anche la trasparenza.

Esempio

Qui dimostreremo come aggiungere trasparenza a un elemento.

Html

Ho un'opacità di 0.6

Ho un'opacità di 1

Qui abbiamo creato due elementi per chiarire come funziona la trasparenza per gli elementi HTML.

CSS

div.opacità
opacità: 0.4;

div
Background-color: Pink;
imbottitura: 15px;

Il primo elemento Div ha una trasparenza di 0.4 e l'altro elemento è completamente non trasparente.

Produzione

Più un elemento trasparente, il contenuto all'interno di quell'elemento sarà anche trasparente.

Aggiunta di trasparenza con RGBA

I colori RGBA vengono utilizzati per evitare la situazione sopra, dove quando si applica l'opacità a un elemento, il contenuto all'interno dell'elemento diventa anche trasparente.

Esempio

Per evitare che il testo presente all'interno di un elemento diventa trasparente, utilizzare il seguente codice.

Html

Con proprietà opacità

Con colore RGBA

Nel codice sopra, stiamo creando due elementi. Al primo div è stata assegnata un'opacità di 0.2 per dimostrare la differenza tra l'utilizzo solo della proprietà opacità e l'utilizzo della proprietà opacità insieme ai colori RGBA.

CSS

div.RGB
Background: RGB (255.192.203);
imbottitura: 15px;
opacità: 0.2;

div.rgba
Contesto: RGBA (255.192.203, 0.2);

Al primo div è stato assegnato un colore di sfondo rosa, imbottitura di 15px e opacità di 0.2. Mentre al secondo div è stato assegnato lo stesso colore di sfondo insieme a un'opacità di 0.2 come quarto argomento nel metodo RGBA.

Produzione

Il testo all'interno dell'elemento non diventa trasparente quando si utilizza la trasparenza con i colori RGBA.

Conclusione

È possibile aggiungere trasparenza a vari elementi HTML come contenitori di div o immagini utilizzando la proprietà opacità. Questa proprietà rende i valori da 0.0 a 1.0, inoltre, più basso è il valore di questa proprietà, maggiore è la trasparenza. Insieme alla trasparenza puoi anche aggiungere un effetto hover sugli elementi, inoltre, utilizzare i colori RGBA per impedire al contenuto all'interno di un elemento di diventare trasparente quando si aggiunge trasparenza ad esso. Questo post ti guida come aggiungere trasparenza in CSS usando la proprietà opacità insieme a esempi pertinenti.