Background trasparente e testo opaco solo con i css

background trasparente rgb

Background trasparente e testo opaco solo con i css, quante volte ci è capitato di dover rendere trasparente il background di un div ma non il contenuto all’interno?

Per ottonere questo effetto di background trasparente ma lasciare il contenuto al suo interno opaco, abbiamo due opzioni:

  • usare un’immagine .png semi-trasparente come sfondo del div
  • usare i css e l’opacità.

Il problema utilizzando l’opacità nei CSS, è oltre alla sintassi fastidiosa per soddisfare la compatibilità con tutti i browser web, è soprattutto che applicando l’opacità al div contenitore, non il contenitore avrà lo sfondo trasparente, ma anche tutti i suoi elementi figli all’interno.Questo significa che qualsiasi testo all’interno avrà la stessa opacità. Si può provvedere a questo problema con la creazione di elementi ridondanti, giocando con il  posizionamento nei CSS, ma in realtà, questa pratica è un pasticcio.

Il problema con le immagini PNG è che, oltre ad una richiesta HTTP superflua, le immagini sono sempre più grandi in termini di dimensioni di una o due righe di codice CSS – soprattutto se si considera che l’immagine deve essere un po ‘più grande per evitare gravi problemi di perdita di memoria con 24-bit immagini PNG con trasparenza alfa in Internet Explorer.

La Soluzione per rendere il background di un div trasparente ma il testo opaco al suo interno

L’alternativa più efficace per rendere il background di un div trasparente, ma non il suo contenuto, sono i colori RGBA.

RGBA è un modo per dichiarare un colore nei CSS che include il supporto trasparenza alfa. Ecco come si presenta:

 
div { 
background: rgb(200, 54, 54); // colore di default
background: rgba(200, 54, 54, 0.5); 
}
 

Questo ci permette di riempire un div con un colore trasparente;

i primi numeri  rappresentano il colore nei valori RGB, il quarto rappresenta un valore di trasparenza tra 0 e 1 (dove zero è completamente trasparente e 1 è completamente opaco).

L’unico neo di questa tecnica è la compatibilità, non tutti i browser supportano RGBA. Stiamo parlando di browser vecchi, che se qualcuno ancora li usa è giusto che vedano male il sito ;-), scherzo per risolvere il problema in maniera pulita si dovrebbe dichiarare un colore “di default”. Questo colore sarà il colore che abbiamo reso trasparente, ma completamente opaco. In questo modo nei browser che non supportano l’RGBA non avremmo la trasparenza ma un colore pieno, poco male. Non dichiarare un colore di default significa che nessun colore verrà applicato nei browser che non supportano l’ RGBA.

Supporto Browser RGBA

Mozilla Firefox 3.0 in su
Safari 3.0 in su
Opera 10 in su
Explorer 9 in su
Chrome qualsiasi versione

su tutti gli altri browser più vecchi verrà mostrato il colore a tinta unita.