IE6で透過PNGを表示させる方法
透過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" ) ); }
コメントを残す