有没有办法让我找到css精灵的确切位置？

Question

我有一个有很多图标的图像，我想用css sprites和应该使用的css找出每个图标的确切图像位置，是否有一个工具可以用来做这个我，还是给我这些地点？

Answer 1

精灵生成器：
- http://css-sprit.es/
- http://csssprites.com/
- http://spritegen.website-performance.org/
- http://spriteme.org/
- http://collamo.jp/Tonttu
- https://github.com/aberant/spittle
- https://github.com/shwoodard/active_assets
- http://duris.ru/

好的教程：
- http://net.tutsplus.com/articles/news/exactly-how-to-use-css-sprites/ - http://www.smashingmagazine.com/2009/04/27/the-mystery...
- http://css-tricks.com/css-sprites/
- http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
- http://www.alistapart.com/articles/sprites
- http://www.websiteoptimization.com/speed/tweak/css-sprites/

使用CSS Sprites的优点：
- What are the advantages of using CSS Sprites in web applications?
- When CSS sprites would be good to use and when not?

使用精灵的缺点
- 需要时间 - When CSS sprites would be good to use and when not?

Answer 2

像这样的工具：http://spritegen.website-performance.org/会为你制作一个精灵并生成CSS。它不会找到现有精灵中的坐标（你怎么能准确地做到这一点？！），但它将有助于首先设置它。

Answer 3

您可以使用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动态修改值。通过试错法，您可以找到确切的位置。