如何使用一個圖像文件在一個網站

Question

顯示圖像/圖標，我已經注意到，網站只使用一個單一的形象png文件來存儲所有的圖標和網站使用的圖像。但是當你檢查一個特定的圖像時，你不會看到其他圖像。

例如google.com圖像文件爲例：

這是如何圖像剪切和剪接成可用該網頁單獨的圖像？

Answer 1

圖像分爲「精靈」。 這裏有一個例子http://www.spritecow.com/。

代碼是這樣的：

.sprite { 
    background: url('imgs/example.png') no-repeat -433px -51px; 
    width: 33px; 
    height: 33px; 
}