REDLINE MAGAZINE | CSSで半透明ボックス

CSSで半透明ボックス

そろそろCSS3のプロパティで各ブラウザに先行実装されてるものを使ってみようかということで、今回は「opacity」を使って半透明ボックスでもやってみようかと。

いつものごとく実験ページ
>>Redline Magazine　半透明ボックスサンプル

↑葉っぱの画像が背景画像でその上の黄緑（#9c0）のボックスが半透明になってるボックスです。
CSSソースはこんな感じ。

div.alphabox{
	width:400px;
	height:600px;
	background:#9c0;
	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	opacity:0.3;
	}

「filter:alpha(opacity=30);」部分がIE用の指定。
値は0～100。ここでは透明度30%という事でopacity=30を指定している。

ただ、こちらのEnjoy*Studyさんの「IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。」という記事を拝見したところ、hasLayout=falseの場合、IE6.7共に透明度を認識しないとのこと。今回の半透明ボックスを作るという主旨で上のソースを使うならほとんどの場合widthくらいは入っているんじゃないかと思う。すなわちhasLayout=trueになるので多分大丈夫かな。
>>hasLayoutについてはこちらでも簡単に触れましたので参考に。

「-moz-opacity:0.3;」の部分についてはFirefoxの独自拡張なのだが、Firefox2で確認したところ、単独のopacityプロパティでも半透明ボックスができたが、NNでは認識してくれないので、ここでの-moz-opacityはNN用対策ということで。こちらの値は0～1.0まで。透明度30%にしたかったので、0.3に指定。

「opacity:0.3;」の部分はOpera（検証未だけど多分サファリもいけそう）用。値は-moz-opacityと同様に0～1.0。ここでも透明度30%にしたかったので、0.3に指定した。

ということで、今ならもれなくブラウザごとに透明度を変化させる事も可能。ただ、上でも書いたとおりFirefox2では「opacity」も認識するようなので、「-moz-opacity」の後に「opacity」を指定した場合、そちらが優先となるので、その辺は記述順序をごにょごにょしてください。

で、バリデータ通した結果はこんな感じ。

文法解析エラーが発生しました - opacity=30)
プロパティ -moz-opacity は存在しません : 0.3
プロパティ opacity は存在しません : 0.3

予想通りのエラーですた。

2007年03月19日 15:35 | Red | パーマリンク