Scrivere testo (con sfondo semi-trasparente) sopra un'immagine
Articolo scritto da Max Bossi
Pagina 1 di 2
Pagina 1 di 2
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:
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.
