Archivo de imagen única para almacenar todas las pequeñas imágenes en una página

Question

En uno de los últimos podcasts Stackoverflow, Jeff habló sobre tener un archivo de imagen único que tenga todas esas pequeñas imágenes en una página y cortarlo con CSS para que todas las imágenes se muestren correctamente. El objetivo es reducir el número de solicitudes de servidor para que la página se cargue más rápido. Estaba como "guau, eso es genial, realmente podría usar esto en nuestro producto".

Mi pregunta es: ¿Cómo se hace esto con CSS? Necesito cargar las imágenes con la imagen de fondo, pero ¿cómo especifico el desplazamiento de la subimagen en la imagen grande? Es decir, supongamos que hay un icono de martillo en la imagen grande en (50px, 50px) y tiene un tamaño de 32px * 32px, ¿cómo puedo forzar al navegador a que solo muestre ese bit?

Answer 1

Básicamente usted utiliza su sola imagen como imagen de fondo, sino que se mueven fuera (hacia la izquierda y hacia arriba) por el desplazamiento de la imagen que quieres mostrar P.ej. para que aparezca el icono del martillo:

.hammer 
{ 
    background: transparent url(myIcons.jpg) -50px -50px no-repeat; 
} 

Pero por lo que yo sé, usted tiene que asegurarse de que el elemento que está usando la imagen de fondo tiene el tamaño correcto (por ejemplo 32x32 píxeles).

Una búsqueda de CSS Sprites le dará más información.

Answer 2

Se llama css sprites.

Básicamente soy un viejo truco utilizado en la programación de juegos donde carga un solo mapa de bits que contiene todos los "estados" de algún elemento que necesita dibujar, la ventaja es que de esta manera la imagen se carga y no hay demora cuando lo necesita para usarlo realmente, en el caso de css, normalmente se implementa usando la imagen como fondo para el elemento y aplicando diferentes compensaciones y límites en: hover,: clases activas y "normales".

Hay más información en el stackoverflow Blog

Aquí es un buen generador: http://www.csssprites.com/

Answer 3

usted sabe la respuesta ... pedir a Google en este caso vistazo a la fuente de la página de resultados de búsqueda de Google, con una herramienta como Firebug y encontrará

.w10 
background-position:-152px 0; 
} 
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0; 
border:0 none; 
cursor:pointer; 
height:16px; 
margin-left:8px; 
vertical-align:bottom; 
width:16px; 
} 

Así que todo W10, W11, W20 etc comparten la misma imagen (nav_logo4.png) todos tienen alto y ancho fijo. y todos especifican (diferente) posiciones de backgroup-posición.