cómo encontrar la posición de píxeles de la imagen de sprite

Question

Quiero saber cómo encontrar una posición imagen (coordenadas) durante el uso de imagen de sprite para el diseño.

Answer 1

Otra forma más fácil de hacerlo es a través de este sitio llamado Sprite Cow. Lo probé recientemente y hace que las cosas vayan mucho más rápido.

Answer 2

Utilice un programa de edición gráfica como Gimp/Photoshop y escriba las coordenadas/posición hacia abajo mientras escribe el CSS.

Answer 3

Puede usar un tool like this y obtener posiciones de fondo de los iconos en el sprite.

Primero debe cargar su imagen, luego seleccione un icono del sprite. Se generará CSS, solo copie el CSS generado y úselo en su clase.

Otras opciones son

1. Es necesario abrir la imagen en un editor de imágenes como Photoshop. Desde allí puede encontrar la posición X e Y en cualquier parte de la imagen. Tenga en cuenta que a la izquierda, arriba es 0,0. Obtenga la posición xey y use así

   background-position: -310px -123px;

Tenga en cuenta el signo "-" antes de las coordenadas X e Y.

1. de inicio con

   background-position: 1px 1px;

Use Firebug para modificar los valores sobre la marcha. Por método de prueba y error, puede encontrar la posición exacta.

Answer 4

intente este ejemplo me ayudó mucho cuando probé el sprite cosas la primera vez.

<style type="text/css"> 
 
#avocado{ 
 
width: 104px; 
 
height: 95px; 
 
background: url(http://2.bp.blogspot.com/-gwRqiyz9X8k/VM0vhBscDsI/AAAAAAAACVA/hITMUs6BjOg/s1600/foods-that-are-toxic-to-dogs.jpg) -110px -121px; 
 
} 
 
</style>

Answer 5

encontré una increíble herramienta en línea para generar código de la imagen Sprite CSS.

Enlace: http://GetSpriteXY.com/

que le ayudará en la generación de píxeles de la imagen. Muy útil para mi