Inserire del testo su un’immagine

23 novembre 2010

Spesso si ha la necessità di aggiungere del testo esplicativo su un’immagine, come per esempio una didascalia. Le soluzioni possibili sono due: inserire il testo subito sotto l’immagine oppure direttamente sull’immagine stessa.

In questa lezione vedremo nel dettaglio come inserire del testo su un’immagine. La prima soluzione che forniremo è di semplice implementazione anche se il risultato non è sicuramente accattivante dal punto di vista estetico. La seconda, invece, è utilizzata sempre più spesso all’interno delle gallerie di immagini e richiede un minimo di lavoro in più.

Testo semplice su un’immagine

La prima soluzione consiste nello sfruttare la proprietà background dei CSS all’interno di un qualsiasi elemento della pagina contenente il testo.

Supponendo di utilizzare un tag <h3> come il seguente:

<h3>Lorem Ipsum</h3>

il codice CSS necessario è questo:

h3 {
  margin: 0px;
  background-image: url('esempio1.jpg');
  background-repeat: no-repeat;
  color: #FFFFFF;
  background-color: red;
  font-size: 140%;
  font-weight: normal; 
  line-height: 260px;
  text-align: center;
  width: 240px;
  height: 150px;          
}

Ecco il risultato finale che si otterrà:

Figura 1 – Testo semplice su un’immagine

Testo semplice su un'immagine

L’esempio è disponibile su questa pagina.

Questa tecnica è ampiamente utilizzata negli elementi di stile della pagina mentre risulta scomoda per le immagini di contenuto per due motivi. Innanzitutto è complicato trovare un colore per il testo che si adatti a tutte le immagini, in più si dovrebbe creare una regola CSS diversa per ogni immagine.

La soluzione che vediamo ora, invece, è sicuramente più adatta per tutte quelle immagini che appartengono al contenuto della pagina.

Didascalia su un’immagine

Il risultato finale che vogliamo ottenere in questo secondo esempio è il seguente:

Figura 2 – Didascalia su un’immagine

Didascalia su un'immagine

Contrariamente a quanto possa sembrare, realizzarlo è davvero semplicissimo. La struttura HTML di cui abbiamo bisogno è composta da un div contenitore con l’immagine e il testo contenuto in un tag <span>.

Il codice HTML, quindi, è il seguente:

<div class="caption">
   <img src="esempio2.jpg" alt="" />
   <span>
      <strong>Lorem ipsum</strong>
      Lorem ipsum dolor sit amet consectetuer eros 
      vivamus porta interdum venenatis.
   </span>
</div>

Attraverso i CSS andremo a spostare il tag <span> all’interno dell’immagine attraverso la proprietà position con valore assoluto. Lo sfondo trasparente è stato realizzato con la proprietà rgba dei CSS3 garantendo però un colore di sfondo compatibile anche con i browser come IE che ancora non supportano tale proprietà.

Vediamo quindi il codice CSS:

.caption {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
}

.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
    
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}

.caption span strong {
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    display: block;
    padding-bottom: 5px;
}

Il risultato finale che otterremo è disponibile in questa demo.

La soluzione che abbiamo appena realizzato è utilizzabile con immagini di qualsiasi dimensione. Come possiano notare, infatti, non sono state assegnate larghezza ed altezza al div contenitore.

Hover sull’immagine

Se vogliamo visualizzare la didascalia dell’immagine solo al passaggio del mouse sulla stessa, abbiamo bisogno di altre due semplici righe di codice:

.caption span { 
    /* ... */
    display: none; 
}

.caption:hover span { display: block; }

Il nuovo esempio è disponibile su questa pagina.

Approfondimenti

Didascalie semitrasparenti sulle immagini.

Lavorare con il colore RGBa.

Il posizionamento con i CSS.

Usare il background.

Tutte le lezioni

1 ... 22 23 24 ... 49

Se vuoi aggiornamenti su Inserire del testo su un'immagine inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Inserire del testo su un'immagine

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy