[CSS]背景画像に関する実用的なスタイルシートのテクニック集
Post on:2011年1月20日
sponsorsr
CSS2.1の疑似要素を使用して、背景画像のクロップ、変形、ポジション、不透明度など背景画像に関する実用的なスタイルシートの4つのテクニックを紹介します。
[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
