[CSS]背景画像に関する実用的なスタイルシートのテクニック集

Post on:2011年1月20日

CSS2.1の疑似要素を使用して、背景画像のクロップ、変形、ポジション、不透明度など背景画像に関する実用的なスタイルシートの4つのテクニックを紹介します。

サイトのキャプチャ

CSS background image hacks

[ad#ad-2]

下記は各ポイントを意訳したものです。

背景画像のクロップ

背景画像をクロップするのは、CSS2.1だけを使用してモダンブラウザにエミュレートできます。
一つ目のデモでは、背景で表示するべき画像をクロップしています。

サイトのキャプチャ

デモページ

対応ブラウザ
Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

実装のイメージは、下記のようになります。

サイトのキャプチャ

実装のイメージ

二つ目のデモは、テキストリンクに並べてアイコンを表示するために、CSSスプライトをクロップしています。

サイトのキャプチャ

デモページ

対応ブラウザ
Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

CSSスプライトのクロップの実装は下記のようになります。

HTML

テキストリンクはシンプルなリスト要素で実装してます。ポイントは各アイテムにclass名を指定することです。

<ul class="actions">
   <li class="save"><a href="#">Save</a></li>
   <li class="delete"><a href="#">Delete</a></li>
   <li class="share"><a href="#">Share</a></li>
   <li class="comment"><a href="#">Comment</a></li>
</ul>

CSS

:beforeを使用してスプライト画像を配置します。

.actions a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}

.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}

もし、ホバー時に画像を変更する際は、変更後のポジションをhoverに指定します。

CSS

.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}

.saved a:before {background-position:-32px -16px;}

今後の選択肢

Firefox3.6で「-moz-image-rect」がサポートされ、背景画像をクロップすることができます。しかし、これは他のブラウザのサポートはなく、「CSS Image Values Module Level 3」によって代替される可能性があります。

背景画像の変形

疑似要素を使用して、別の方法で背景を変更してみます。

サイトのキャプチャ

デモページ

対応ブラウザ
Firefox 3.6+, Opera 10.5+, Safari 4+, Chrome 4+, IE 9+

一つ目のデモは、背景画像を回転して表示することで、画像を変更しています。

サイトのキャプチャ

実装のイメージ

二つ目のデモは、回転させるのに類似しています。このデモは「scaleX」でスケールを変更しています。

サイトのキャプチャ

実装のイメージ

今後の選択肢

この方法は、CSSのドラフトを見る限り、今後他の選択肢があるように思われません。

背景画像のポジション

CSS2.1の仕様では背景画像のポジション指定は左・上（left, top）から算出した値に制限されています。
このデモでは、疑似要素で背景にレイヤーを使用し、背景画像を右から算出した値に配置します。

サイトのキャプチャ

デモページ

対応ブラウザ
Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

実装のイメージは下記のようになります。

サイトのキャプチャ

実装のイメージ

この方法は容易に他のテクニックと組み合わせることができます。さらに多くの背景画像に関するテクニックは、下記にもあります。

[ad#ad-2]

CSS

div要素に下記のスタイルシートを適用します。

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

今後の選択肢

背景画像のポジション指定がどこからでもできるようになるのは「CSS Backgrounds and Borders module」にあります。現在リリースされている安定したブラウザの中では、Opera11だけが可能です。

背景画像の不透明度

背景画像の不透明度を変更します。

サイトのキャプチャ

デモページ

対応ブラウザ
Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+

IE8では不透明度をサポートしておらず、IE filtersも疑似要素で機能しません。

実装する際には、背景画像がコンテンツに干渉しないように配置します。

CSS

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(image.jpg);
   opacity:0.7;
}

sponsors

top of page

©2024 coliss