Ocultar texto con css

Tengo una etiqueta en mi html como esta:

<h1>My Website Title Here</h1>

Usando css quiero reemplazar el texto con mi logo actual. He conseguido el logo sin problemas cambiando el tamaño de la etiqueta y poniendo una imagen de fondo mediante css. Sin embargo, no puedo averiguar cómo deshacerse del texto. He visto que se hace antes, básicamente empujando el texto fuera de la pantalla. El problema es que no puedo recordar dónde lo vi.

La forma más amigable para los navegadores es escribir el HTML como

<h1><span>Website Title</span></h1>

luego usar CSS para ocultar el span y reemplazar la imagen

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

Si usted puede utilizar CSS2, entonces hay algunas maneras mejores utilizando el contenido propiedad, pero por desgracia la web no es 100% allí todavía.

Comentarios (4)

puedes usar la propiedad css background-image y z-index para asegurarte de que la imagen se mantiene delante del texto.

Comentarios (0)

La respuesta es crear un span con la propiedad

{display:none;}.

Puedes encontrar un ejemplo en este sitio

Comentarios (1)