ようやくうちも無線キーボードにしてみた
2008/08/27
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-について書かれてます
[...] -filter: “alpha( opacity=50 )”; //IE8用 filter: alpha( opacity=50 );//IE6、7用 opacity: 0.5; //モダンブラウザ用 ■参考にさせていただいた記事 モダンブラウザとIEに対応したopacity指定 | PAOLOG [...]