CSSスプライト

一枚の画像をCSSで部分表示してリクエスト数を減らす

読み込む画像の数が減ることによって、表示速度が早くなり、画像変換時のタイムラグも解消される。

更新性の高いコンテンツのしての画像には使用せず、内容の無い汎用的な飾り画像に活用する。

スタイルシート

.menu li{
  width:160px;
  height:40px;
  line-height:40px;
  text-align:center;
}
.menu li a{
  display:block;
  width:100%;
  height:100%;
  background-image:url(image/button_160x40.png);
}
.menu li a:hover{
  background-position:-160px 0px; //←※ココがポイント！
}

メニューに使用した画像