如何找到CSS精灵的正确偏移量？

Question

我有一个精灵图像设置为我网页上某个元素的背景，但是如何找到正确的偏移量以便我可以在屏幕上看到它？

Answer 1

在图形程序中构建精灵图像时，必须记下每个元素的偏移量并将其用于CSS中。

Answer 2

有一些网络工具可以创建精灵并为您提供CSS位置。 http://css-sprit.es/就是一个例子。

Answer 3

在线CSS Sprite Generator值得研究，它应该采取一些这种方法的乏味。

Answer 4

要记住的主要事项是，补偿将是负。如果您有这100x500与100x100的精灵的形象，那么偏移量将是：

.img1 { background-position: 0 0; } 
.img2 { background-position: 0 -100px; } 
.img3 { background-position: 0 -200px; } 
.img4 { background-position: 0 -300px; } 
.img5 { background-position: 0 -400px; } 

Answer 5

由于PNG文件的空白区域占用很少的字节，只是把所有的“图像”每隔一定的时间，比如每50或100像素。这样，你可以简单地找到第一个合适的值，并从中删除50/100像素（在vim中为50 ctrl-x）。

Answer 6

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

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