Tweet

Pocket

透過PNGってとても便利なんですがIE6以前のバージョンでは対応していません。
ですがまだまだIE6を使用しているユーザはかなりいると思いますので切捨てられないのが実情。
そんな方の為にIE6で透過PNGを表示させる方法をご紹介します。

その方法は、cssにちょいと記述を加えるだけで対応できちゃいます。

【CSSコード例】

.bg {
             width:800px;
             background:url("alpha.png");
}
* html .bg {
             filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
             background:none;
 }

.bgが全てのブラウザに適応されるクラスで、alpha.pngという透過PNGを背景で指定しています。
そのすぐ下にスターハックを使用し同じクラス名で上記のようなコードを記述します。

これでほぼすべてのモダンブラウザで透過pngを表示する事ができます。

※上記コードで表示出来ない場合は、下記のコードを試して見て下さい。

【CSSコード例】

.bg {
             width:800px;
             background:url("alpha.png");
}
* html .bg {
　　　　　behavior: expression(
　　　　　 this.style.behavior || (
 　　　　　this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
 　　　　　this.style.backgroundImage = "none",
　　　　　 this.style.behavior = "none"
 　　　　　)
　　　　　 );
}