如何在您的網頁上顯示從一個圖像不同的圖像

Question

任何一個可以告訴我如何顯示在不同的位置Facebook，谷歌等的圖像從該圖像 -

到像這 -

Answer 1

這就是被稱爲圖像「子畫面」。它是將圖像集合到一個圖像中。

您必須使用CSS來選擇「精靈」文件的哪一部分應該顯示。請查看W3學校的此鏈接，瞭解使用示例：

http://www.w3schools.com/css/css_image_sprites.asp

Answer 2

CSS：

在最上面的圖像

#topimage{ 
    background-image:url('/images/image.png'); 
    background-position:0 0; 
    width:200px; 
    height:24px; 
} 

爲從頂部， 假定圖像的每個部分的高度的第二圖像是24像素..

#secondimage{ 

background-image:url('/images/image.png'); 
background-position:0 -24px; 
    //-24px means the picture is shifted up by 24px so 
    //that the second image from top is visible 
width:200px; 
height:24px; 
}