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

Question

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

Answer 1

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

Answer 2

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

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

它会生成这样的CSS样式，你需要在CSS类中包含它

background-position: -213px -135px; 
width: 97px;
height: 65px;

Answer 3

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

Answer 4

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

Answer 5

要记住的主要事项是偏移量负数。如果你的图像是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 6

由于png文件的空白区域只占用很少的字节，因此只需按规定的间隔放置所有“图像”，例如每50或100像素。这样你就可以简单地找到第一个正确的值并从中删除50/100像素（vim中的 50 ctrl-x ）。