Reemplazar texto por imágenes con CSS | Using Image replacement techniques

Existen diversos métodos para reemplazar un texto por una imagen y varias necesidades. Por ejemplo para los headers de los blogs me han preguntado varias veces cómo añadir el Logo pero que a la vez tenga el texto del título del blog.

Bien lo que se conoce como XHTML semántico y por cuestiones de accesibilidad debemos hacer que la página tenga sentido aunque no se puedan mostrar las imágenes o los estilos, además los buscadores no pueden encontrar imágenes pero sí textos.

Para que convivan los dos yo utilizo el siguiente truco, le aplico un estilo al selector que lo necesite:

h3 { text-indent: -9999px}

De esta forma saco el texto de la pantalla y sólo se verá la imagen. También podemos cambiar:

visibility : hidden;

ó

display: none;

La diferencia es que en la primera el elemento sigue ocupando el espacio original y con display no.