image - Web ページで 1 つの画像から別の画像を表示する方法

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

上から2番目の画像の場合、画像の各部分の高さを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;
}