任何建议如何在精灵图像上找到图标位置

Question

我是精灵的新手，我想我理解更改背景位置以替换图像的概念。 所以我有我下载的这个大精灵png，但我怎么知道图标的位置？

我没有照相馆，有没有其他推荐工具（免费）找到位置？

Answer 1

您可以使用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 2

您可以使用Sprite Cow查找图标位置，而无需使用外部程序。该网站提供复杂的图标选择功能。

Answer 3

MSPaint在Windows 7上显示相对于图像的光标位置。如果使用选择工具，它将显示大小和位置。

GIMP或Paint.Net也可以。

Answer 4

您可能需要考虑使用CSS Sprites generator。它会让你的生活更轻松。

Answer 5

GIMP或任何原始图像编辑器都可以。