CSS tutorial: sostituire il testo con un' immagine

Ho deciso di pubblicare un po' di tutorial di base relativi ai fogli di stile a cascata (CSS), diciamo una rubrica del fine settimana che spero possa tornare utile (fatemi sapere). Iniziamo dalla testa e vediamo come sostituire il titolo del blog con un' immagine...

» continua

Esistono svariati metodi per sostituire il testo con un immagine, in questo caso voglio descrivere il più semplice; niente JavaScript ma soltanto HTML e CSS... inutile farla troppo lunga, ecco di seguito gli esempi di codice, in coda al post trovate alcune considerazioni ed un paio di note.

Questo è il codice CSS:

#immagine-testo {
position: relative;
height: 40px;
width: 400px;
}
#immagine-testo span {
background-image: url(replacement.jpg);
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
}

Questo l' HTML:

<h2 id="immagine-testo" title="immagine al posto del testo"><span></span>Immagine al posto del testo</h2>

Questo il risultato:

Considerazioni e note

questo metodo garantisce la massima compatibilità (nel caso di browser con immagini disattivate ad esempio) ma necessita di un tag span vuoto e non permette l' utilizzo di immagini trasparenti... infatti il testo rimane sotto l' immagine e nel caso di una PNG trasparente questo sarebbe il risultato: