モダンブラウザとIEに対応したopacity指定

cssで要素の透明度を指定する「opacity」プロパティの書き方をメモしておきます。

IE以外のモダンブラウザ

要素に透明度を与えるにはcssのopacityプロパティを使います。たとえば透明度を半分の50%にしたいときは次のように指定します。

opacity: 0.5;

ですがこのプロパティはIE以外のモダンブラウザと呼ばれるものしか対応していません。IE6～IE8では独自拡張のfilterプロパティを使うことで同様の表現ができます。

IE6とIE7

IE6またはIE7では次のように指定します。

filter: alpha( opacity=50 );

opacity=50は透明度が50%の意味。opacityプロパティとは数値の指定が違うので注意です。

IE8

IE8では独自実装や、先行実装のプロパティを使うときは接頭辞「-ms-」を使わないといけなくなりました。さらに「:」以降の部分では等号、コロン、カンマなどが使えないのでクォーテーションで囲んで次のように書きます。

-ms-filter: "alpha( opacity=50 )";

両対応の書き方

IEとそれ以外のモダンブラウザに対応した書き方は次のようになります。

-ms-filter: "alpha( opacity=50 )";
filter: alpha( opacity=50 );
opacity: 0.5;

IEのバージョンも8になり、IE独自のバグに悩まされることも少なくなりましたが、IE6のシェアもまだ無視できなかったりと・・・しばらくは対応しなくてはならないみたいですね。

参考ページ

Microsoft CSS ベンダー拡張・・・-ms-について書かれてます

関連する投稿

• 個人的によく使うID名とclass名 (0)