背景を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;

}

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


投稿日: 2014年10月20日
カテゴリー: html | 投稿者: