image - 如何在网页上显示与一张图片不同的图片

Question

谁能告诉我如何在这张图片的不同位置上显示 Facebook、Google 等的图片-

像这样的东西-

Answer 1

这就是所谓的图像“精灵”。它是将一组图像放入单个图像中。

您必须使用 CSS 来选择应该显示“sprite”文件的哪个部分。查看 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;
}