Ocultar texto usando CSS

Tengo una etiqueta en mi html como esta:

<h1>My Website Title Here</h1>

Con CSS quiero reemplazar el texto con mi logotipo real. Tengo el logotipo allí sin problemas al cambiar el tamaño de la etiqueta y poner una imagen de fondo a través de css. Sin embargo, no puedo entender 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.

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;
}

¿Por qué no simplemente usar:

h1 { color: transparent; }

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>

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

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

luego use CSS para ocultar el lapso 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á al 100%.

Ocultar texto con accesibilidad en mente:

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

Este método oculta efectivamente 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á interesado en leer sobre accesibilidad:

• Iniciativa de Accesibilidad Web (WAI)

• Documentación de accesibilidad de MDN

Jeffrey Zeldman sugiere la siguiente solución:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Debería ser menos intensivo en recursos que -9999px;

Por favor, lea todo sobre esto aquí:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Vea mezzoblue para un buen resumen de cada técnica, con fortalezas y debilidades, además de ejemplos html y css.

Tantas soluciones complicadas.

La más fácil es simplemente usar:

color:rgba(0,0,0,0)

simplemente puede ocultar su texto agregando este atributo:

font size: 0 !important;

No utilizar. { display:none; }Hace que el contenido sea inaccesible. Desea que los lectores de pantalla vean su contenido y lo visualicen al reemplazar el texto con una imagen (como un logotipo). Mediante el uso de text-indent: -999px;un método similar, el texto sigue ahí, pero no visualmente allí. Use display:none, y el texto se ha ido.

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

Lo anterior también funciona bien en el último Thunderbird.

puede usar la background-imagepropiedad css y z-indexasegurarse de que la imagen permanezca delante del texto.

¿Por qué no usas:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

Si no tiene ningún elemento span o div, funciona perfectamente para enlaces.

La respuesta es crear un lapso con la propiedad

{display:none;}

Puedes encontrar un ejemplo en este sitio

Esta es en realidad un área propicia para el debate, con muchas técnicas sutiles disponibles. Es importante que seleccione / desarrolle una técnica que satisfaga sus necesidades, incluidos: lectores de pantalla, combinaciones de activación / desactivación de imágenes / CSS / secuencias de comandos, SEO, etc.

Aquí hay algunos buenos recursos para comenzar en el camino de las técnicas estándar de reemplazo de imágenes:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Use la etiqueta de condición para un navegador diferente y use CSS que debe colocar height:0pxy width:0pxtambién debe colocar font-size:0px.

Si el objetivo es simplemente hacer que el texto dentro del elemento sea invisible, configure el atributo de color para que tenga 0 opacidad usando un valor rgba como color:rgba(0,0,0,0);simple y limpio.

No recuerdo dónde lo recogí, pero lo he estado usando con éxito durante años.

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

Mi mixin está sass, sin embargo, puede usarlo de la manera que mejor le parezca. En buena medida, generalmente mantengo una .hiddenclase en algún lugar de mi proyecto para adjuntarla a elementos para evitar duplicaciones.

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Prueba este código para acortar y ocultar texto

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

o para ocultar el uso en su clase CSS .hidetxt { visibility: hidden; }

repalce contenido con el CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Usualmente uso:

span.hide
{
  position:fixed;
  right:-5000px;
}

Si podemos editar el marcado, la vida puede ser más fácil, simplemente elimine el texto y sea feliz. Pero a veces el marcado fue colocado por el código JS o simplemente no se nos permite editarlo, demasiado mal CSS resultó ser la única arma puesta a nuestra disposición.

No podemos colocar una <span>envoltura del texto y ocultar toda la etiqueta. Por cierto, algunos navegadores no solo ocultan elementos display:nonesino que también deshabilitan los componentes en su interior.

Ambos font-size:0pxycolor:transparent pueden ser buenas soluciones, pero algunos navegadores no los entienden. No podemos confiar en ellos.

Yo sugiero:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

El uso overflow:hiddenimpone nuestro ancho y alto. Algunos navegadores (no los nombrarán ... IE ) pueden leer ancho y alto como min-widthy min-height. Quiero evitar que la caja se agrande.

Usar el valor cero para font-sizey line-heighten el elemento me ayuda:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

Para ocultar texto de HTML, use la propiedad de sangría de texto en CSS

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * para el texto dinámico, necesita agregar espacios en blanco, para que su CSS aplicado no se vea afectado. nowrap significa que el texto nunca se ajustará a la siguiente línea, el texto continúa en la misma línea hasta que <br>se encuentre una etiqueta

Una de las formas en que lo logro es usar :beforeo :after. He usado este enfoque durante varios años, y particularmente funciona muy bien con los iconos de vectores de glifos.

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

Esto funcionó para mí con span (validación de eliminación).

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

Una solución que me funciona:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

La mejor respuesta funciona para texto corto, pero si el texto se ajusta simplemente aparece en la imagen.

Una forma de hacerlo es detectar errores con un controlador jquery. Intenta cargar una imagen, si falla, arroja un error.

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

Ver CÓDIGO DE MUESTRA

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }