Una delle ultime tendenze del web è l’utilizzo di sfondi semitrasparenti. Per ottenere questo effetto non è sempre necessario ricorrere alle PNG trasparenti ma è possibile anche tramite i fogli di stile.

La proprietà che andremo ad utilizzare è l’opacità, che è possibile impostare tramite il parametro opacity: 0.5. Il numero, variabile da 0.0 a 1.0, indica il grado di opacità, dove lo zero corrisponde alla trasparenza e l’uno alla piena visibilità. Per impostare quindi uno sfondo semitrasparente è possibile utilizzare questa proprietà associata ad un colore di fondo. Non possiamo tuttavia utilizzarla direttamente nell’elemento che vogliamo rendere semitrasparente, perché l’opacità influisce direttamente anche sul testo, a scapito della leggibilità. Per risolvere il problema sono sufficienti un paio di DIV in più.

Demo

Ipotizziamo di avere un elemento, chiamato "box":

<div id="box">
   Lorem ipsum dolor sit amet consectetuer...
</div>

Per il nostro esempio è necessario aggiungere due div:

<div id="box">
   <div class="box-bg"></div>
   <div class="box-content">
      Lorem ipsum dolor sit amet consectetuer...
   </div>
</div>

Come potete intuire dal nome, il primo servirà da sfondo per il secondo. In questo modo possiamo utilizzare l’opacità solo su quest’ultimo, senza andare ad intaccare il contenuto.

Passiamo al foglio di stile. Come prima cosa, impostiamo un CSS di base:

#box {
   width:600px;
}

.box-bg {
   background:#000;
   opacity:0.5;
}

.box-content {
   padding:10px;
}

Al box assegnamo soltanto ulna larghezza, mentre al box-content assegnamo un padding di 10px. Allo sfondo invece assegnamo un colore (in questo caso nero) e un’opacità al 50% (0.5 su scala da 0 a 1).

Ora però dobbiamo dire allo sfondo di posizionarsi sotto al box-content e di assumere le dimensioni grandi quanto l’intero box. Per farlo ricorriamo ai posizionamenti assoluti e alle dimensioni in percentuale. Ma procediamo con ordine.

Innanzitutto dobbiamo dichiarare position:relative il nostro box, cosicché gli elementi al suo interno si posizionino IN RELAZIONE al div stesso:

#box {
   width:600px;
   position:relative;
}

allo sfondo invece dobbiamo dire di posizionarsi indipendentemente sotto al contenuto, perciò dobbiamo dichiararlo position:absolute, mentre per fare in modo che sia grande quanto il box stesso imposto larghezza e altezza al 100%:

.box-bg {
   background:#000;
   opacity:0.5;
   position:absolute;
   width:100%;
   height:100%;
}

Ora non resta che posizionare anche il contenuto, semplicemente dichiarandolo position:relative. Gli elementi posizionati infatti "vincono" rispetto a quelli non posizionati e di default vengono visualizzati sopra questi ultimi. In questo modo invece il contenuto sarà sopra allo sfondo:

.box-content {
   padding:10px;
   position:relative;
}

Se visualizziamo l’esempio con un browser moderno (ie7, firefox, safari) vediamo l’effetto desiderato (ho inserito uno sfondo per contrasto):

Esempio 1

Naturalmente il problema sorge con IE. Innanzitutto la proprietà opacity viene ignorata, fortunatamente però esiste una proprietà analoga che fa uso del filtro Alpha di Internet Explorer filter:alpha(opacity:50). In questo caso l’opacità viene indicata da 0 a 100.

In secondo luogo in IE6 la proprietà height:100% non viene letta correttamente. Anche in questo caso una feature specifica di IE ci permette di simularne il comportamento. Possiamo infatti utilizzare la funzione expression che permette di eseguire calcoli stile javascript all’interno del css:

height:expression(document.getElementById("box").offsetHeight);

Come si può facilmente intuire questa imposta l’altezza dello sfondo uguale all’altezza esterna (offsetHeight) del box principale ( document.getELementById("box") ).

Il nostro CSS diventa quindi:

#box {
   width:600px;
   position:relative;
}

.box-bg {
   background:#000;
   opacity:0.5;   filter:alpha(opacity=50);
   position:absolute;
   width:100%;
   height:100%;}

.box-content {
   padding:10px;
   position:relative;
}

* html .box-bg {   height:expression(document.getElementById("box").offsetHeight);
}

il prefisso "* html " serve per far sì che quella proprietà venga utilizzata solo da IE 6, in quanto per i browser più recenti non esiste un elemento qualsiasi (*) padre dell’elemento html.

Ora quindi possiamo visionare l’esempio corretto fino a IE 6:

Esempio 2

Come ulteriore esempio ho utilizzato un’immagine al posto del colore, creando quindi un doppio sfondo:

Esempio 3