如何在网页上显示来自一个图像的不同图像

Question

任何人都可以告诉我如何在此图片的不同位置展示Facebook，Google等图片 -

这样的事情 -

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;
}

来自顶部的第二张图片， 假设图像的每个部分的高度为24px ..

#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;
}