如何找到 CSS 精灵的正确偏移量？
我将精灵图像设置为页面上元素的背景，但是如何找到正确的偏移量以便我可以在屏幕上实际看到它？
I have a sprite image set as the background of an element on my page, but how do I find the proper offsets so I can actually see it on the screen?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
当您在图形程序中构建精灵图像时，您必须记下每个元素的偏移量并在 CSS 中使用它们。
When you build your sprite image in your graphics program you have to write down the offsets for each element and use those in your CSS.
您可以使用这样的工具并获取精灵中图标的背景位置。
您需要首先上传图像，然后从精灵中选择一个图标。 CSS将会生成，只需复制生成的CSS并在您的类中使用它即可。
它将生成这样的 CSS 样式，您需要将其包含在 CSS 类中
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.
It will generate CSS styles like this, you need to include that in your CSS class
有一些网络工具可以创建精灵并为您提供带有位置的 CSS。 http://css-sprit.es/ 是一个示例。
There are web tools that will create the sprite and give you CSS with positions for you. http://css-sprit.es/ is an example.
在线 CSS Sprite Generator 值得研究一下，它应该可以消除这种方法的一些乏味。
The online CSS Sprite Generator is worth looking into, it should take some of the tedium out of this approach.
要记住的主要一点是偏移量将为负。如果您的图像尺寸为 100x500，精灵为 100x100，则偏移量将为：
The main thing to remember is that the offsets will be negative. If you have an image that's 100x500 with 100x100 sprites, then the offsets will be:
由于 png 文件的空白区域占用很少的字节，因此只需按固定间隔放置所有“图像”，例如每 50 或 100 像素。这样你就可以简单地找到第一个正确的值并从中删除 50/100 像素（vim 中的 50 ctrl-x）。
Since empty areas of a png file takes up very few bytes, just put all "images" at a regular interval, say every 50 or 100 pixels. That way you can simply find the first proper value and remove 50/100 pixels from that (50 ctrl-x in vim).