CSS

Remplazar texto con imagenes usando CSS

Muchas veces tenemos la necesidad de remplazar texto con imágenes pero sin tener la posibilidad de hacerlo directamente o porque no nos resulta conveniente, caso frecuente en los sistemas de gestión de contenido (CMS) y en los logos.

En este artículo de mostraremos algunas técnicas para remplazar el texto con imágenes mediante CSS.

    1. Remplazo mediante una identación alta.

La base de esta técnica es esconder el texto dando una identación muy alta, de modo que el texto tenga que salir de la pantalla y se dimensiona la etiqueta al tamaño de la imagen y esta se declara como fondo.

Veamos un ejemplo, común en los encabezados de un sitio.

Código XHTML:

<h1 id='logo'>Título de la página</h1>

Código CSS para hacer el remplazo:

#logo {
/* dimensiones de la imagen */
widht: 150px;
height:100px;
/* identar el texto */
text-indent:-9000px;
/*mostrar la imagen*/
background:url(logo.gif) no-repeat 0 0;
}

Las desventajas de este método son que los usuarios con imágenes deshabilitadas en el navegador, no verán ni el texto original ni la imagen. Otra desventaja es que no es posible poner un link a la imagen.

  1. Remplazo mediante un renglón altoAl igual que la técnica anterior se busca esconder el texto sacándolo de la pantalla, pero la forma de hacerlo en esta es dando un tamaño exagerado al renglón, el texto en su posición por defecto es mandado al fondo y por tanto ya no es visible.Veamos un ejemplo:Código XHTML:
    <h1 id='logo'>Título de la página</h1>

    Código CSS para hacer el remplazo:

    #logo {
    /* dimensiones de la imagen */
    widht: 150px;
    height:100px;
    /*agrandando el renglón*/
    line-height: 1000px;
    /*escondiendo el renglón*/
    overflow: hidden;
    display: block;
    /*mostrar la imagen*/
    background:url(logo.gif) no-repeat 0 0;
    }
  2. Remplazo por superposiciónEsta técnica se basa en la superposición de capas de CSS y no oculta el texto, sino que le coloca una capa encima con la imagen de fondo.Veamos un ejemplo:Código XHTML:
    #logo {
    /* Dimensionar capa */
    position:relative;
    widht: 150px;
    height:100px;
    /* Evitar se agrande la capa */
    overflow:hidden;
    }
    
    #logo span {
    /* Encimar capa */
    z-index:1;
    display:block;
    position:absolute;
    left:0;
    top:0;
    /* Dimensiones de la imagen */
    widht: 150px;
    height:100px;
    background:url(logo.gif) no-repeat 0 0;
    }

    Esta técnica tiene la ventaja de mostrar el texto original cuando el usuario tiene desabilitadas las imágenes y la desventaja de que puede tener problemas en versiones antiguas de IE.

Puedes encontrar más en Diseñorama

Deja un comentario

5 Comentarios

  • Lo unico que le veo mal es que al tag le pones un class y al estilo le pones id

    h1 class=’logo’ // #logo

    Al margen de eso esta bueno el post, justo tenia ganas de escribir algo asi en mi blog. Asi que lo voy a utilizar…

    Saludos

  • Hola, buscando por internet encontre tu bog, la verdad es que esta bastante interesante, pero yo quiero ir un poco más alla.
    ¿Se pueden poner capas a un blog de blogger?,¿tendrías alguna idea de como hacerlo?

    un saludo y gracias

  • Hola,tengo una consulta.Tengo un blog y Google acaba de aprobarme mi cuenta de Adsense para poner anuncios.Ya me aparecieron los 3 recuadros de anuncios que ellos ponen,y que cambian a cada rato de anuncio.Sin embargo,solo me aparece el texto de anuncio,mas no la imagen como en otros blogs.Como hago para que me aparezca la imágen del anuncio.

    Gracias.