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

mostrar imagen en html

Question

En uno de los últimos podcasts de Stackoverflow , Jeff habló acerca de tener un solo archivo de imagen que tenga todas esas pequeñas imágenes que están en toda una página y luego 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 imagen secundaria 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, utiliza su imagen individual como imagen de fondo, pero la mueve hacia afuera (hacia la izquierda y hacia arriba) mediante el desplazamiento de la imagen que desea visualizar. Por ejemplo, para mostrar el icono del martillo:

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

Pero hasta donde sé, debes asegurarte de que el elemento que está usando la imagen de fondo tenga el tamaño correcto (por ejemplo, 32x32 px).

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

Answer 2

Se llama sprites css .

Básicamente, soy un viejo truco utilizado en la programación de juegos donde cargas un solo mapa de bits que contiene todos los "estados" de algún elemento que necesitas dibujar, la ventaja es que de esta manera la imagen está precargada y no hay demora cuando realmente necesitas usarla En el caso de css, normalmente se implementa utilizando la imagen como fondo para el elemento y aplicando diferentes desplazamientos y límites en: hover,: active y "normal" classes.

Hay más información en el blog de

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

Answer 3

Ya sabes la respuesta ... pregunta a google en este caso, mira la fuente de la página de resultados de búsqueda de google, con una herramienta como Firebug y encontrarás

.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;
}

Entonces todos 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.