如何找到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並在您的課堂中使用它。