HOME > > > CSS「opacity」でIE8以下まで対応し透過する方法

CSS「opacity」でIE8以下まで対応し透過する方法

opacityをIE8に対応

opacityとは

CSSで「opacity」を設定すると透過する事ができます。
しかしIE8以下となると(思った通りですが・・・)対応していません。
せっかく透過が気軽に出来るのに、これではIE8が使われている段階では使えません。
勿体ないので、IE8以下でも「opacity」を使える様にしちゃいましょう。

CSSの記述

CSSの記述

「opacity:0.5;」は50%透過になります。
IE8以下以外のブラウザですとこれだけで透過になるのですが、いかんせんIE8以下はなりません。
そこで「filter(IE6・7)」と「-ms-filter(IE8)」を設定する事でIE8以下にも対応できます。
実験した結果「filter」だけでもIE8も対応している様です。

img:hover{
 opacity: 0.5;
 filter: alpha(opacity=0.5);        /* ie 6 7 */
 -ms-filter: "alpha(opacity=0.5)";  /* ie 8 */
}

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.03.15