Sprite como imagen de fondo: ¿cómo mostrar en un contenedor más grande?

Necesito usar sprites como imagen de fondo para el tipo de elemento de <a> etiqueta. El problema es que necesito mostrar solo una parte del sprite (por ejemplo, 17 px x 17 px) y el contenedor puede ser mayor. En este caso, en lugar de una imagen de fondo y un espacio vacío, obtengo la imagen que quería tener y debajo de la siguiente imagen (que no quiero mostrar).

¿Hay alguna forma de limitar el height y width del cuadrado en el sprite que me gustaría mostrar? no puedo configurar solo height y width por todo <a> tag.

Ejemplo:

enter image description here

Y lo que me gustaría hacer es no mostrar la parte de la segunda imagen que está en el mismo sprite (es el único ejemplo; en el proyecto muestro el texto en toda la línea, por lo que cambiar el ancho no es una solución)

preguntado el 05 de septiembre de 12 a las 10:09

¿Puedes publicar la captura de pantalla? ¿Qué esperas?......... -

claro, ya he agregado un ejemplo:

2 Respuestas

Establecer la altura y el ancho para el sprite

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 17px;
       width: 17px;
}

EDITAR : después de que OP ponga una captura de pantalla

Necesitará utilizar el :before pseudoselector junto con el content perfecta

Cree una demostración en http://jsfiddle.net/SqbnC/

a:before{
  background:url('http://pf.staticfil.es/hp/img/sprite2.png');
  width: 22px ;
  height: 22px;
  display:inline-block;
    content:"";
}

he especificado el height y width como 22px porque esa es la dimensión del ícono que muestro del sprite

Respondido el 05 de Septiembre de 12 a las 12:09

No es una solución, el conjunto puede tener más de 17 píxeles (puede tener más de dos líneas), por lo que no puedo limitar la altura: ravenik

¿Puede especificar un ejemplo de la a - lobo

Agregado a mi respuesta. Revisalo ahora - lobo

Debe usar la posición de fondo en su clase css. Como ejemplo..

.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}

Actualice el valor 0 y -20 en función de la parte de su imagen que desea mostrar en el div. Y finalmente, no debe usar la etiqueta IMG en su etiqueta Anchor, debe pasar la imagen a través de la clase CSS como se indicó anteriormente.

<a class="classsample" href="#">TEXT</a>

Use relleno si no hay texto en la etiqueta de anclaje.

Respondido el 05 de Septiembre de 12 a las 11:09

no ayuda cuando en lugar de 'TEXTO' tengo algo que tomará más de 3 líneas - ravenik

Agregar texto en la etiqueta hará que el área de la etiqueta se haga más grande. - Sudip amigo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.