Come fare uno div trasparente
Spesso occorre applicare al div una trasparenza di fondo per far vedere, almeno in parte, quello che c'è sotto. È un'esigenza abbastanza comune nello sviluppo dei siti web. Ad esempio, vogliamo creare un messaggio per far accettare la cookie policy all'utente, in modo ben visibile, senza oscurare la visione del sito. Vogliamo far capire all'utente che si tratta soltanto di un messaggio pop-up, i veri contenuti11 dell'articolo si trovano sotto. In questi casi la trasparenza è molto utile.
Come modificare l'opacità del Div
Per fare un div trasparente possiamo lavorare sul codice CSS del sito. Ad esempio, abbiamo un box e vogliamo impostare la trasparenza su tutto il contenuto del div. Nel codice HTML scriviamo:
<div id="nomediv">contenuto del div</div>
A questo punto, andiamo nel codice CSS della pagina web e impostiamo le specifiche di "nomediv" ( qualsiasi altro nome va bene ) nel foglio di stile. Nel seguente modo:
<style>
#nomediv { opacity:0,5; }
</style>
L'attributo opacity indica al browser di applicare l'opacità del div al 50%. L'opacità è l'inverso della trasparenza, quindi l'opacità a 0,5 è equivalente a una trasparenza 0,5.
Vogliamo aumentare la trasparenza del div? È sufficiente modificare il valore dell'attributo portando, ad esempio, l'opacity a 0.3 ossia al 30%. Se l'opacità è al 30%, la trasparenza è al 70%. E così via.
Come applicare la trasparenza soltanto allo sfondo del Div
Alcune volte potrebbe essere necessario applicare l'opacità soltanto allo sfondo del div e non a tutto al contenuto. Ad esempio, l'attributo opacity=0.3 rende trasparente al 70% sia lo sfondo che il testo. E questo può diventare un problema per l'usabilità perché il testo perde di leggibilità.
Per applicare la trasparenza soltanto allo sfondo del div, e non al testo, dobbiamo specificare la trasparenza sull'attributo background-color, scrivendo nel seguente modo:
<style>
#nomediv { background-color: rgba(128,128,128,0.7); }
</style>
Nel codice precedente abbiamo impostato il colore di background del div al colore RGB ( 128, 128, 128 ) che equivale a un grigio leggermente scuro. Più a destra abbiamo indicato un altro valore pari a 0.7 che imposta il livello di trasparenza dello sfondo del div.
In quest'ultimo caso, la trasparenza non viene applicata al testo del contenuto del div ma soltanto al colore di sfondo del div. Abbiamo così ottenuto quello che volevamo.
