Uff la respuesta es más o menos larga, en este link lo explican muy bien:
Libros Web |
Sprite CSS y Rollover.
En resumen, es una técnica que han llamado
SPRITE CSS y funciona como en los videojuegos. Se combinan varias imágenes en una sola con fondo transparente, se juntan en una grilla/cuadricula con un tamaño por cuadro que tu mismo defines, por ejemplo de 50x50 pixeles.
Entonces se forma un bloque de imágenes, por ejemplo de 4 así:
-----------
img1 | img2
-----------
img3 | img4
-----------
Cada una en un espacio delimitado de 50 pixeles, si deseas seleccionar alguna debes hacerlo por sus coordenadas, por ejemplo:
img1:
x = 0
y = 0
img2:
x = 50px
y = 0
img3:
x = 0px
y = 50px
img4:
x = 50px
y = 50px
Ahora,
¿Como se usa en html y css?:
Al
FIGURE,
SPAN,
DIV o cualquiera que sea el elemento donde colocaremos la imagen de fondo, le asignamos una clase que ya tiene asignada como fondo el sprite y una clase que ya tiene asignada la coordenada de la imagen, así:
Código CSS:
Ver original.sprite{
background: url('sprite.png');
background-size: 200px 200px; /*tamaño real de la imagen*/
}
.sprite[class*="img"]{ width: 50px; height: 50px; } /*tamaño de la cuadrícula*/
.sprite.img1{ background-position: 0 0; }
.sprite.img2{ background-position: 50px 0; }
.sprite.img3{ background-position: 0 50px; }
.sprite.img4{ background-position: 50px 50px; }
Ese es el principio, ahora no siempre las imágenes tendrán el mismo tamaño así que hay muchas cuadriculas complicadas, si vas a empezar lo mejor es usar cuadrículas cuadradas e ir practicando, pero si ya entendiste el concepto, en realidad puedes posicionar las imágenes como quieras en el tamaño que quieras, siempre que a cada clase sprite le asignes el tamaño correspondiente y las medidas que correspondan a la imagen de fondo.
Esta técnica tiene como todo sus limitaciones y sus variantes, por ejemplo usar svg, para no preocuparte por que se pixele en distintas resoluciones o igual puedes reemplazarla o usarla en conjunto con icon-fonts o para reproducir animación frame by frame.
Te dejo un ejemplo de su uso en código
Aquí (Animación) y
Aquí(ej: SVG) pd: Sí te quedo claro, regalame un +1, cualquier duda animate a seguir preguntando. Éxitos!.