Esta práctica es una técnica habitual en sitios web maquetados con CSS, mediante la cual podemos intercambiar un texto de un elemento de la página por una imagen, lo que nos aportará diversos beneficios.

Se trata de un vídeo en el que veremos esta sencilla técnica, que utilizaremos más adelante en otros videotutoriales de CSS, de modo que expliquemos sus particularidades y no tengamos que detenernos en ellas en vídeos sucesivos, más complejos.

La técnica no es nuestra, sino que la hemos visto realizar en varios sitios web y talleres de CSS, pero resulta bastante interesante. Se basa en lo siguiente.

1. Tenemos un elemento de la página como un H1, o cualquier otro elemento donde se coloque un texto.
2. Con CSS hacemos que se oculte el texto que hay dentro de ese elemento y se sustituya por una imagen.

Una vez aplicados los estilos, el usuario no vería el texto que hay en el H1, sino que vería la imagen definida dentro de las declaraciones CSS.

Las ventajas de esta técnica son las siguientes, entre otras:

• Nos ahorramos el escribir la etiqueta IMG en todas las páginas, economizando peso en la página.
• La imagen se define dentro del CSS, por lo que, si queremos cambiarla simplemente tenemos que cambiar la hoja de estilo, con lo que automáticamente modificaríamos todas las veces que aparece esa imagen en el sitio web.
• Las propiedades de la imagen, como anchura, altura, etc. están en el archivo CSS, con lo que también las podemos cambiar una única vez y modificarlas en todo el sitio web.
• Desde el punto de vista de los buscadores, ellos verán un texto en el código HTML, del que podrán sacar palabras clave. Las personas que visiten la web verán sólo la imagen.
• Podemos modificar el texto que hay en el elemento en diversas páginas, aplicando palabras clave diferentes, pero los usuarios siempre verán la misma imagen.

Estas son las ventajas que se me ocurren ahora mismo, pero quizás haya otras que se pudieran destacar. Pero lo que está claro es que la técnica merece la pena, porque nos ayuda a separar un poquito más el contenido (que va en el HTML) de la presentación (que va en las hojas de estilo), que es básicamente el objetivo de la maquetación CSS.

Además, como punto extra adicional en este vídeo, vamos a explicar cómo podemos conseguir que la imagen, que se muestra sustituyendo al texto, se comporte como un enlace. Algo que en la práctica es muy probable que deseemos.

Dicho esto, veamos el vídeo donde realizamos esta práctica con CSS, que es muy cortito y espero bastante entretenido.

Código completo del ejercicio

El código de este ejercicio es tan corto, que lo voy a colocar directamente en este artículo, por si alguien quiere copiar y pegar.

El HTML quedaría de la siguiente manera:

<h1><a href="https://desarrolloweb.com"><span>DesarrolloWeb.com</span></a></h1>

El código CSS, para sustituir el texto y hacer que el enlace aparezca en toda la extensión configurada en la imagen de fondo, sería el siguiente:

h1{
   background: url(logo-dw.jpg) no-repeat;
   width: 180px;
   height: 106px;
}
h1 span{
   display: none;
}
h1 a{
   display: block;
   width: 100%;
   height: 100%;
}

Eso es todo. Espero que haya parecido interesante este taller de CSS, aunque en cualquier caso vuelvo a recalcar que esta técnica es bastante común dada su utilidad.