如何在網頁中使用精靈

Question

我一直對使用精靈圖像感興趣。

由於教育方面的原因，我一直在研究SO的CSS，發現不是單獨的圖像，而是像整個PNG圖像中的up + down投票項目。

background-image:url('img/sprites.png?v=5') 

我該如何處理從組裝好的png中拉出單個圖像？所以我可以在我的網站中使用它，這似乎比在子目錄中有大量圖像更有效，而不是1中的主圖像的集合？

Answer 1

關鍵是background-position：你建立這樣一個精靈圖像，然後計算每個圖像的偏移量。然後你設置適當的值。您還可以爲保持背景的元素指定正確的寬度和高度。

示例（從向上箭頭位置）：

background-position: 0 -265px; 
height: 25px; 
width: 41px; 

您設置相同的background-image但不同的位置。