残像ブログ

残像だった

CSSで透過を実装する

背景を透過した半透明なデザインってかっくいーよな!と思ったので実現方法を調べていたのだけど、意外とややこしかったので備忘録としてまとめておく。
なおJavascriptは使わずにCSSのみでの実装を前提とします。

今回は、コンテンツ全体を包むボックス(黒)のみを半透明にして背景画像を透けさせたいとします。

この記事では半透明の実装には以下の3つの方法を考えます

  • Opacityプロパティを使う
  • RGBaで不透明度を指定する
  • 透過PNGを使う

この記事でのデモページの動作確認は以下のブラウザで行いました

  • IE8
  • Firefox3.6
  • Opera11
  • Safari4
  • Chrome13

大変参考にしたページ:第2回 OpacityとRGBa実践テクニック|gihyo.jp … 技術評論社

Opacityを使う

OpacityはCSSで設定できるプロパティで、文字通り対象の要素の透明度を指定できます。
対応しているブラウザは、Firefox 2以上,Safari 2以上,Opera 9以上,IE9以上(?),Chromeです(参考サイトではIE8でも有効とあったのですが、私のPCのIE8ちゃんは透過してくれませんでした)。

#wrap{
	background-color:black;
	opacity:0.7;	/*Firefox, Opera, Chrome, Safari*/
	filter: alpha(opacity=70);	/*IE8以下*/
}


デモページ

IEは独自の半透明指定方法(filter: alpha)があるのでそれを指定しています。この独自指定はIEの4位から対応してるみたいなので6とかでも問題ないはず(未確認)。

opacityでは0.0(透明)〜1.0(不透明)の間の値、filter: alphaでは0〜100の間の値を指定します。

しかしながら、デモを見ればわかる通り、全体を囲むdivなどにopacity(filter: alpha)を指定するとその子要素も全て半透明化してしまうので使いどころを考えないと駄目ですね。

RGBaを使う

RGBaはCSSで色を指定するときに使うアレで、色のRGB値と不透明度を指定できます。
対応しているブラウザはFirefox 3以上,Safari 3以上,Opera 10以上,IE9以上(?),Chromeです。IE8についてはOpacityと同様。

#wrap{
	background-color:rgba(0,0,0,0.7);	/*背景を黒にして不透明率70%*/
}


デモページ

「rgba(赤,青,緑,不透明度)」の書式で設定します。赤青緑は0〜255のRGB値、不透明度は0.0〜1.0の値で指定します。

IE8以外では望む通りの結果が得られました。
今度は中身の要素は半透明になっていません。rgbaは色の指定をする時に一緒に不透明度も設定しているだけなので、指定されてない要素には影響がないです。惚れます。

しかしIEには対応しておらず、Opacityのように独自機能もありませんのでIEで見ると大変残念な事になります。

透過PNGを使う

もう背景色じゃなくて透過PNGを背景画像にしちゃう方法。

#wrap{
	background-image:url(透過.png);
}


デモページ

画像ファイルが増えるのがちょっとアレですがとりあえずFirefoxでもIE8でも実装できました(IE7でどうなってるのかが気になりますが)。

しかしIE8だとデモページのメニュー部分のロールオーバーもどきに激しいラグがあったりと、中々いい方法ってないもんだなあと思いました。