> Manuales > Videotutorial de CSS

Vídeo en el que mostraremos cómo sustituir un texto de un elemento HTML por una imagen, mediante CSS.

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:

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual