在HTML中使用精靈圖像的正確方法是什麼？

Question

假設我們要求圖標圖像元素需要在HTML中呈現，因爲我們需要爲某些屏幕閱讀器指示圖標存在，並且最好讓它們像IMG標籤比我或純DIV更好。

我們有sprite.png和empty.png圖像。 empty.png用於創建虛假的空白圖像（sprite圖像將顯示，因爲它是我們元素的背景）。

在CSS中，我們有一流的

.icon { 
    background:url('sprite.png') 0px 0px; 
    width:20px; 
    height:20px; 
} 

然後我們用這個在我們的HTML這樣的：

<img src="empty.png" class="icon" alt="Image from Sprite is Shown" /> 

我們能做到這一點任何其他方式使用我們的「sprite.png」作爲形象與源文件設置任何掩膜/剪輯屬性在img與CSS？

在此先感謝。

Answer 1

background-image不接受它後面的0px參數。您可能會將它與background混合在一起。

要顯示精靈圖像的正確部分，請使用background-position選擇圖像的正確部分。

下面是一個簡單的教程頁面：http://www.tutorialrepublic.com/css-tutorial/css-sprites.php