English Português

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.
  2. 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.

  3. 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;
    }
  4. 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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Carlos Carreño / Hace 10 años /

      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

      Responder a Carlos Carreño →
    2. Francisco / Hace 10 años /

      Toda la razón carlos, ahora lo corrijo 😉

      Responder a Francisco →
    3. Agustín Carmona / Hace 8 años /

      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

      Responder a Agustín Carmona →
    4. Null / Hace 8 años /

      En #logo pusiste widht cuando es width =)
      Tu segundo método funciona como cross-browser.
      Saludos ^^.

      Responder a Null →
    5. Augusto / Hace 4 años /

      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.

      Responder a Augusto →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad