禪CSS和img標籤

Question

我想在我的CSS更禪，也減少我的服務器上的負載。我已經聽說過，並且看到了一種技巧，我可以使用背景圖像和偏移值來允許我將所有小圖標圖像下載到一張圖像中，並使用CSS顯示正確的圖像。但是，我有點困惑如何正確地做到這一點。特別是，如果我有一個16×16的圖像，48個像素沿着我的大圖像，稱爲img.png，我想是這樣的：

<img style="background-image: url('img.png'); background-position: 48px" /> 

（顯然走的是風格伸到CSS，但內嵌這裏用於說明目的）

但是，img忽略偏移量。如果我使用類似跨度的東西，我不確定如何設置跨度的寬度（實際上我試過了，它似乎忽略了寬度。）

任何幫助，將不勝感激。

Answer 1

你在考慮CSS sprites。 This article應該指出你在正確的方向。

Answer 2

您將使用與img標記不同的標記，您需要指定它的大小，並且背景位置應爲負值。您可以使用div標籤，例如，因爲它是默認塊標記，以便你可以爲它指定一個尺寸：

<div style="width: 16px; height: 16px; background: url('img.png') -48px;"></div> 

如果只指定一個偏移，其水平位置，垂直位置爲0。如果它是一個垂直偏移，你必須同時指定水平和垂直偏移：

<div style="width: 16px; height: 16px; background: url('img.png') 0 -48px;"></div> 

Answer 3

可以使用this tool生成精靈圖像，也是工具負責生成的CSS你