Técnicas CSS: Remplazo por imágenes

Técnicas CSS

Cuando queremos añadir imágenes al diseño de una web utilizando CSS, normalmente recurrimos a elementos vacíos con los que luego modificamos su imagen de fondo y tamaño. ¿Pero qué pasa cuando queremos remplazar un elemento que contiene texto? En estos casos es cuando tenemos que recurrir a las distintas técnicas para el remplazo por imágenes.

Todo sería más sencillo si todos los navegadores soportaran la nueva propiedad content, incluida en el futuro CSS Nivel 3. Pero de aquí hasta que todos los navegadores utilizados en la red la soporten puede pasar mucho tiempo, así por ahora nos conformarnos utilizando alguna de las técnicas que existen para este objetivo.

La técnica original

El primer método que apareció es muy sencillo y fácil de entender. Se basa en contener el texto del elemento al que queremos remplazar en una etiqueta span y luego en CSS ocultarla, de ésta manera tendremos el elemento limpio de texto para añadir la imagen de fondo.

#encabezado {
width: 479px; /* Anchura de la imagen */
height: 40px; /* Altura de la imagen */
background: url(imagen.gif) no-repeat;
}
#encabezado span { display: none; }

<h1 id=”encabezado”><span>Lorem ipsum dolor sit amet</span></h1>

Esta técnica tiene dos problemas. El primero es que es de accesibilidad, ya que algunos lectores de pantalla ignoran los elementos ocultos la propiedad display. El segundo es un poco más retorcido ya que la etiqueta span al no tener significado semántico, su uso se considera mal marcado.

Un ejemplo de esta técnica.

Técnica del span vacío

Este método parece una variación del original (sobre todo si vemos solo su código HTML) pero nada más lejos de la realidad. La idea es tener un span vacío delante del texto, con el que mediante CSS mostraremos la imagen encima del texto.

#encabezado {
positiom: relative;
width: 479px; /* Anchura de la imagen */
height: 40px; /* Altura de la imagen */
}
#encabezado span {
position: absolute;
width: 100%;
height: 100%;
background: url(imagen.gif) no-repeat;
}

<h1 id=”encabezado”><span></span>Lorem ipsum dolor sit amet</h1>

Con este método solucionamos los problemas de accesibilidad de la técnica anterior, pero seguimos teniendo un molesto span en el código, además el texto oculto podría llegar a verse si la imagen tiene transparencias o si se amplía mucho el texto.

Un ejemplo de esta técnica.

Técnica de sangría negativa

Esta técnica es muy sencilla ya que el truco esta en darle al texto una sangría negativa extremadamente alta para que no se llegue a ver nunca y así tendríamos el elemento limpio para remplazarlo por una imagen.

#encabezado {
width: 479px; /* Anchura de la imagen (opcional) */
height: 40px; /* Altura de la imagen */
text-indent: -9999px;
background: url(imagen.gif) no-repeat;
}

<h1 id=”encabezado”>Lorem ipsum dolor sit amet</h1>

La ventaja de esta técnica es que por fin nos libramos de los span extra. Su principal problema es que da problemas en IE5 y también podemos tenerlos con algunos motores de búsqueda.

Un ejemplo de ésta técnica.

Técnica del padding

Esta técnica se basa en quitarle al elemento la altura, con lo que no se podría ver el texto y luego usar su padding para mostrar la imagen de remplazo. Además incluye un hack para que funcione correctamente en IE5.

#encabezado {
overflow: hidden;
padding: 40px 0 0 0; /* Altura de la imagen */
width: 479px; /* Anchura de la imagen (opcional) */
height: 0px !important;
height: /**/: 40px; /* Hack para IE, con la altura de la imagen */
background: url(imagen.gif) no-repeat;
}

<h1 id=”encabezado”>Lorem ipsum dolor sit amet</h1>

Se podría decir que esta es la técnica definitiva, ya que es accesible, no requiere de span adicionales y funciona prácticamente todos los navegadores en uso. La pega es que hemos tenido que recurrir a un pequeño hack para lograrlo, pero hasta que CSS3 sea un estándar indiscutible tendremos que recurrir a ésta u otras técnicas de remplazo.

Un ejemplo de esta técnica.

5 comentarios

  1. edgar escribe:

    hola quisiera que me ayudaran con un codigo es que etoy creando una pagina web pero necesito cambiar el color de fondo de una celda de una tabla por una imagen, la verdad no se como hacerlo si alguien pudiera ayudarme.

  2. ruben escribe:

    Puedes utilizar la propiedad CSS background-image para asignar imagenes como fondo de casi cualquier elementos html, incluida una celda de una tabla.

    Prueba a darle una id o class a la celda (por ejemplo: td id=”celdaConFondo”) y puedes usar la propiedad que te he dicho antes (por ejemplo: #celdaConFondo { background-image: url(fondo.jpg); }).

  3. edgar escribe:

    gracias pero lo que yo busco es que en al pasar el cursor sobre una celda esta cambie su color de fondo por una imagen

  4. Blog Linklift.es » Blog Archive » …it’s just a Linkalternative! Más allá del enlace de texto escribe:

    […] para describir la imagen. Aunque una solución óptima en algunos casos es usar la técnica de reemplazo de imágenes en CSS. Con este método, el buscador encontraría nuestro código y nuestro texto plano, y las personas […]

  5. aaa escribe:

    no es accesible..si no carga las imagenes no se ve el texto

Envia un comentario

Tienes que estar autentificado para enviar un comentario.