Artículos como Graphical Headings o Accesible image replacement ya lo han tratado antes.
La técnica de remplazo de imagenes de Fahrner se refiere básicamente a un defecto crítico que hace ilegible el contenido si las imágenes están apagadas en nuestro navegador.
La técnica oríginal tiene varios problemas, como el añadido de un elemento <span> o que los usuario con las hojas de estilo activadas en el navegador y las imagenes apagadas no verán nada.
El metodo de Levin arregla todos estos problemas, pero sigue insertando un elemento <span> vacio para poder visualizar la imagen. La solución radica entre el metodo de Levin y el metodo de Gilder, usando un elemento <span> vacio sobre un contenedor para mostrar la imagen:
<div class="capa"><span></span>Hola</div>
/* El código css */
.capa {
width: 100px;
height: 30px;
position: relative;
}
.capa span {
background: url(imagen.jpg) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
Esta técnica parece funcionar correctamente en los siguientes navegadores: