スポンサーリンク

IEでCSSの透明度(opacity)設定が反映されない原因

画像等の透明度(opacity)がFirefoxで有効なのにも関わらず、IEで有効にならない場合はwidthとheightが設定されていない可能性があります。

IEでは、opacityを設定する際にwidthとheightが設定されていなければopacityの設定が無視される仕様となっているようです。

例として下記のような書き方をすればFirefox及びIEで透明度の設定が有効になります。
————————————————————
#menu_bar {
margin:0;
padding:0;
width:800px;
height:17px;
background:url(example_bg.gif);
filter:alpha(style=1,opacity=100, finishopacity=55);
opacity:0.55;
}
————————————————————

▼上記例文中、下から2行目の設定の

filter:alpha(style=1,opacity=100, finishopacity=55);

がIEの設定です。opacityからfinishopacityまでの値で透明度をグラデーションします。

値は100が不透明、0が完全な透明となります。

▼下から1行目の設定はIEを除く全般のブラウザ用の設定となります。

opacity:0.55;

値は1が不透明、0が完全な透明となります。

コメント