背景をCSSスプライトするメモ

只野開発者です。
 
今回は背景画像をCSSスプライトにて切り出し表示させる方法をメモしておきます。
CSSスプライトの利点。
画像のダウンロード数を大幅に減らすこと、ページのロード時間を減らすことが出来ます。
 
背景画像を使用する箇所ごとに作成するのではなく、
一枚画像にいくつもの画像を載せて、CSSにて表示させたい箇所に
スポットを当てて切り抜き表示させます。
 
下に簡単な例を載せます。
****.pngという画像は、適当にこんな感じにしておきます。
css-sprite
まず、下の指定ですと、背景画像が****.pngで、ポジションが左上(0,0)。高さ24px分表示になります。
a{

background:url(“****.png”) no-repeat scroll left center transparent;

background-position: 0 0;

height:24px;

}
結果は●だけ表示されます。
 
次に、aタグのhover時は以下のように指定します。変わったのは、positionのみです。
これは、下に24pxずらした箇所を基点に表示させることになります。
a:hover{

background:url(“****.png”) no-repeat scroll left center transparent;

background-position: 0 -24px;

height:24px;

}
結果は★が表示されます。