さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

IE6で透過PNGを表示させる方法

Pocket
LINEで送る

透過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"
      )
      );
}

カテゴリー:css, HP制作

コメントを残す

コメント内容