Imagen en CSS {background} para tag <a>

C

cssyhtml #1 Oct '10

Buenos días quisiera saber si es posible con CSS mostrar una imagen de esta manera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Plantilla Maestra</title>
</head>

<style>
          .iconoBuscador{
                        display: block !important;
                        background-image: url(google.png);
                        width: 1em;
                        margin: 0.4em;
                        }
</style>
  
<body>
  
              <a href="www.google.com" class="iconoBuscador">Google</a>

</body>

</html>

Con la misma busco no colocar imágenes en el HTML. Si deseo cambiar el icono solo modifico el CSS, quiero utilizar el "em" para flexibilizar en diferentes medios.

Qué bueno sería poder pasar una variable (y que sea validada en el HTML/CSS) para que pueda cambiar el enlace, el icono y el nombre del buscador solamente del CSS, flexibilizando al máximo el HTML.

Gracias.

GamA #2 Oct '10

Si es posible.

Casualmente tuve que hacer algo similar hace unos dias. Yo lo solucioné como tú, cambiando poca cosa, vamos:

.icon{
margin-left:20px;
background:URL(pdf.jpg) 0 0 no-repeat;
padding-left:25px;
}

Y luego al enlace le pones un:

<a class="icon"

Lo del margen es para que no se pegue al borde izquierdo, y el padding le pones lo que mide la imagen + separación entre la imagen y el enlace.

Si no pones padding, el texto se pondrá encima de la imagen background.

Espero que te sirva.

NeB1 #3 Oct '10

No solo se puede sino que además es muy recomendable en ciertos casos.

Imagen en CSS {background} para tag <a>

Usuarios habituales

Tags