Ocultar texto usando CSS

Tengo una etiqueta en mi html como esta:

<h1>My Website Title Here</h1>

Usando CSS quiero reemplazar el texto con mi logotipo real. Tengo el logotipo allí, no hay problema al cambiar el tamaño de la etiqueta y colocar una imagen de fondo mediante CSS. Sin embargo, no sé cómo deshacerme del texto. Lo he visto antes básicamente empujando el texto fuera de la pantalla. El problema es que no recuerdo dónde lo vi.

Jan 23 '09 08:01 Micah

Esta es una forma:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Aquí hay otra forma de ocultar el texto evitando el enorme cuadro de 9999 píxeles que creará el navegador:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Jan 23 '2009 01:01 nicholaides

¿Por qué no utilizar simplemente:

h1 { 
  color: transparent; /* make the text invisible */
  user-select: none; /* prevent selection of the text */
}

Nov 04 '2011 22:11 nesono

Simplemente agregue font-size: 0;a su elemento que contiene texto.

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

Expandir fragmento

Jun 27 '2011 05:06 valk

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

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

luego use CSS para ocultar el intervalo y reemplazar la imagen

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

Si puede usar CSS2, entonces hay algunas formas mejores de usar la contentpropiedad, pero desafortunadamente la web aún no está completa al 100%.

Jan 23 '2009 01:01 Chris Farmiloe

Ocultar texto teniendo en cuenta la accesibilidad:

Además de las otras respuestas, aquí hay otro método útil para ocultar texto.

Este método oculta eficazmente el texto, pero permite que permanezca visible para los lectores de pantalla. Esta es una opción a considerar si la accesibilidad es una preocupación.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Vale la pena señalar que esta clase se usa actualmente en Bootstrap 3 .

Si estás interesado en leer sobre accesibilidad:

Iniciativa de Accesibilidad Web (WAI)
Documentación de accesibilidad de MDN

Jan 04 '2015 19:01 Josh Crozier