有没有办法让我找到 css sprites 的确切位置？
我有一个包含很多图标的图像，我想使用 css sprites 和应该使用的 css 找出每个图标的确切图像位置，是否有一个工具可以用来为我做到这一点，或者给我地点吗？
I have an image that has a lot of icons, and I want to find out the exact image location of each icon using css sprites and the css that is should use, is there a tool that I can use to do that for me, or give me the locations?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
精灵生成器：
- 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 /新闻/确切如何使用-css-sprites/
- http://www.smashingmagazine.com/2009/04/27/the-mystery...
- http://css-tricks.com/css-sprites/
- http://cssglobe.com/post/3028/creating-简单实用的 css-sprites
- http://www.alistapart.com/articles/sprites
- http://www.websiteoptimization.com/speed/tweak/css-sprites/< /a>
使用 CSS Sprites 的优点：
- 在 Web 中使用 CSS Sprites 有哪些优势应用程序？
- 何时可以使用 CSS 精灵以及何时使用不是吗？
使用 Sprites 的缺点
- 需要时间。
- 何时可以使用 CSS 精灵以及何时使用不是吗？
Sprite Generators:
- 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/
Good tutorials:
- 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/
Advantages of using CSS Sprites:
- What are the advantages of using CSS Sprites in web applications?
- When CSS sprites would be good to use and when not?
Disadvantages of using Sprites
- Takes time.
- When CSS sprites would be good to use and when not?
像这样的工具： http://spritegen.website-performance.org/ 将为并生成与之配套的 CSS。它不会在现有的精灵中找到坐标（你怎么能准确地做到这一点？！），但它会帮助你首先设置它。
A tool like this: http://spritegen.website-performance.org/ will make a sprite for you and generate the CSS to go with it. It won't find the coordinates in existing sprites (how could you do that accurately?!), but it will help to set it up in the first place.
您可以使用这样的工具并获取精灵中图标的背景位置。
您需要首先上传图像，然后从精灵中选择一个图标。 CSS将会生成，只需复制生成的CSS并在您的类中使用它即可。
其他选项是
您需要在 Photoshop 等图像编辑器中打开图像。从那里您可以找到图像中任意位置的 X 和 Y 位置。请注意左、上是 0,0。获取 x 和 y 位置并像这样使用
背景位置：-310px -123px；
请注意 X 和 Y 坐标之前的“-”号。
开始
背景位置：1px 1px；
使用 Firebug 即时修改值。通过试错法你可以找到准确的位置。
You can use a tool like this and get background positions of the icons in the sprite.
You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.
Other options are
You need to open the image in an image editor like Photoshop. From there you can find the X and Y position anywhere in the image. Please note that left, top is 0,0. Get the x and y position and use like this
background-position: -310px -123px;
Please note the "-" sign before X and Y co-ordinates.
Start with
background-position: 1px 1px;
Use Firebug to modify the values on the fly. By trial and error method you can find exact position.