Nueve técnicas de sustitución de imágenes con CSS

La sustitución de imágenes mediante CSS es, a grandes rasgos, una técnica de sustitución de un elemento de terxto de una pagina por una imagen. Quizá uno de los ejemplos más clarificadores sería a la hora de incluir el logo en una web. Es posible que desees utilizar una etiqueta <h1> y texto por accesibilidad y los beneficios en cuanto a SEO, pero a la vez, y por razones estéticas, te gustaría mostrar tu logo y no el texto.
Un ejemplo:

1. <h1 id="logo">  
2.     <span>Intenta  
3. </h1>  

<h1 id="logo">
 <span>Intenta
</h1>

y el css:

1. h1#logo {  
2.         width: 250px;  
3.         height: 25px;  
4.         background-image: url(logo.gif);  
5. }  
6. h1#logo span {  
7.         display: none;  
8. }  

h1#logo {
        width: 250px;
        height: 25px;
        background-image: url(logo.gif);
}
h1#logo span {
        display: none;
}

En CSS-Tricks puedes encontrar el análisis de nueve de estas técnicas, cómo se realizan y las ventajas y desventajas de cada una.
Nine Techniques for CSS Image Replacement » »