CSS2.1の透明度設定(ブラウザ別)

2008/03/31

最近とあるWebサイトを作るにあたって画像の上にdivボックスを重ねてボックスの背景色を透かす必要があったのでやりかたを調べてみました。

CSS3のopacityプロパティをサポートするブラウザでは「opacity: 透明度」という設定でいいのですが、古いFirefoxやIEではopacityが使えないのでそれぞれの設定方法を書いておきます。

Safari3, Safari2, Firefox2, Opera9

opacityプロパティが使用可能。透明度は0(0%)〜1(100%)の範囲で指定する。60%の場合は0.6。

opacity: 透明度;

Firefox1

-mozプレフィックス付opacityプロパティを使用する。透明度の指定はopacityと同じ。

-moz-opacity: 透明度;

IE7, IE6

alphaフィルタを使用する。透明度は0(0%)〜100(100%)の範囲で指定する。60%の場合は60。

filter: alpha(opacity=透明度);

これら全てを記述したCSSを作成すれば広範囲のブラウザで透明処理が有効になります。

opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);

CSSの一般的な資料については技術資料(CSS)にまとめてあります。