如何从精灵图像中找到图像的像素位置

Question

我想知道在使用精灵图像进行样式设置时如何找到图像位置（坐标）。

Answer 1

另一种更简单的方法是通过名为Sprite Cow的网站。我最近刚试过它，它让事情变得更快。

Answer 2

您可以使用tool like this并获取精灵中图标的背景位置。

您需要先上传图片，然后从精灵中选择一个图标。将生成CSS，只需复制生成的CSS并在您的类中使用它。

其他选项

1. 您需要在Photoshop等图像编辑器中打开图像。从那里，您可以在图像中的任何位置找到X和Y位置。请注意，左边，顶部是0,0。获取x和y位置并像这样使用

   background-position：-310px -123px;

请注意X和Y坐标前的“ - ”符号。

1. 从

   开始

   background-position：1px 1px;

使用Firebug动态修改值。通过试错法，您可以找到确切的位置。

Answer 3

我找到了一个很棒的在线工具来生成Sprite图像CSS代码。

链接：http://GetSpriteXY.com/

它将帮助您生成图像像素。对我很有用。

Answer 4

使用Gimp / Photoshop等图形编辑程序，在编写CSS时写下坐标/位置。

Answer 5

尝试这个例子帮助我第一次尝试 sprite 时很多。

<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>