Scrivere testo (con sfondo semi-trasparente) sopra un’immagine

Un effetto che è piuttosto frequente vedere sui siti e blog di nuova generazione, sono le cosiddette scritte in overlay sopra alle immagini, molto spesso accompagnate da un background scuro semitrasparente. Ecco un esempio:

In questo articolo vedremo come realizzare delle scritte sovrapposte alle nostre immagini utilizzando i fogli di stile CSS.

La prima cosa da fare è creare una struttura HTML come questa:

<div class="boximg">
  <img border="0" src="tramonto.jpg"/>
  <div class="boxtesto">
    <span class="testo">Un bellissimo tramonto!</span>
  </div>
</div>

Come potete vedere ho creato un DIV contenitore (con classe ".boximg") al cui interno posiziono la mia immagine ed un nuovo div (con classe ".boxtesto") che a sua volta contiene uno span che marca il testo che si vuole applicare.

Passiamo adesso a vedere il CSS che, materialmente, svolgerà il lavoro:

.boximg {
  position: relative;
  width: 400px; /* Stessa larghezza dell'immagine */
  height: 300px; /* Stessa altezza dell'immagine */
}
div.boxtesto {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
}
span.testo {
  padding: 10px;
  color: #FFFFFF;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
}

Il box contenitore (".boximg") ha un posizionamento relativo e dimensioni uguali a quella dell’immagine che è destinato ad ospitare. Il box contenitore del testo (".boxtesto") è il fulcro del nostro lavoro: ha un posizionamento assoluto, che lo sottrae al normale flusso degli elementi, ed è posizionato al margine inferiore sinistro del suo contenitore; ovviamente ha larghezza 100% al fine di occupare l’intero spazio disponibile in orizzontale. Interessanti, infine, le due definizioni del background mediante rgb e rgba che servono a definire lo sfondo scuro e semi-trasparente. Lo span ".testo", per finire, ha il solo scopo di stilizzare la scritta e di applicarvi un po’ di padding.

Vecchie versioni di Explorer e la trasparenza

Il codice visto in precedenza è quasi perfetto… unico neo? la trasparenza non funziona con Internet Explorer che, in nessuna delle versioni sin’ora rilasciate, supporta rgb e rgba! Al fine di correggere questo difetto e rendere il nostro CSS cross-browser, dovremo far ricorso ai cari e vecchi filtri di IE:

/* Per IE 5.5, 6 e 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* Per IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Ecco, finalmente, il nostro CSS completo:

.boximg {
  position: relative;
  width: 400px; /* Stessa larghezza dell'immagine */
  height: 300px; /* Stessa altezza dell'immagine */
}
div.boxtesto {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.6);
  /* Per IE 5.5, 6 e 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* Per IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
span.testo {
  padding: 10px;
  color: #FFFFFF;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
}