Insecure -Project IE-

Microsoft アプリケーションを追って

トップページアプリケーションCSS > CSSでオブジェクトの半透明化を実現する方法

CSSでオブジェクトの半透明化を実現する方法

CSSでオブジェクトを半透明にできるプロパティ。IE8 では ActiveX の Opacity プロパティを使用して半透明を実現。同様にIE9, Safari でも Opacity プロパティで表示可能。CSS 3.0 のプロパティ。

filter: alpha(opacity=50);
opacity:0.5;

不透明度 IE 50%=50、Safari 50%=0.5

バージョン8以前のIEで透明化する場合に気をつけなければならないことは、透明化する要素の中にメイリオなどのフォントを使っている場合 ClearType (アンチエイリアス)が無効になってしまうことです。MS P ゴシックなどのアンチエイリアスが元々利かないビットマップフォントを使うと見栄えの劣化を防ぐことができます。

IE9 は Direct2D による高品質な描画により透明化した際にフォントの表示に悪影響を与えなくなりました。

表示サンプル

CSS opacity 0.5

IEたん

IE filter opacity 50

IEたん