IE8以下で透過PNGが黒くなる場合の対処法

こんにちわ。film Power Rangers

今回は透過PNGを使った場合に陥りやすいバグの対応方法についてご紹介いたします。
IE8やIE7などで透過pngを使った場合、背景が黒くなる場合があります。
opacityなどの透過指定をしている場合にもおきるかもしれません。

そういった場合、IE独自の指定をする必要があります。

<br />
img.png{<br />
    filter&#8217;: &#8216;progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#8221;sample.png&#8221;, sizingMethod=&#8221;scale&#8221;);<br />
}<br />

CSSにて透過PNGを使っている要素にprogid:DXImageTransformのfilterを指定してあげます。
ただ最近のサイトは大量に透過PNGを使用している場合があるので、いちいち指定するのが面倒だという人は、
javascriptにて簡単に対応できるのでお勧めです。

<br />
// for IE<br />
jQuery(function() {<br />
    if(navigator.userAgent.indexOf(&#8220;MSIE&#8221;) != -1) {<br />
        jQuery(&#8216;img&#8217;).each(function() {<br />
            if(jQuery(this).attr(&#8216;src&#8217;).indexOf(&#8216;.png&#8217;) != -1) {<br />
                jQuery(this).css({<br />
                    &#8216;filter&#8217;: &#8216;progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#8221;&#8216; + jQuery(this).attr(&#8216;src&#8217;) + &#8216;&#8221;, sizingMethod=&#8221;scale&#8221;);&#8217;<br />
                });<br />
            }<br />
        });<br />
    }<br />
});<br />

上記のスクリプトを読み込むだけで自動的に透過PNGを配置している要素に対してfilterが適応されます。
jQueryを使用しているので別途jQuery.jsをダウンロードして下さいね。

ちなみにこちらのスクリプトでは背景に透過PNGを指定してる場合うまく動作しない場合があります。
そんなときは下記のような便利なプラグインがありますので、ご参考下さい。

jQuery.belatedPNG

You may also like...

4 Responses

  1. 2013年7月10日

    […] 引用もとはこちらです↓ http://www.ateliee.com/archives/1093 […]

  2. 2014年3月14日

    […] こちらの記事で対策方法が書かれています。 http://www.ateliee.com/archives/1093 […]

  3. 2014年3月27日

    […] 参考サイト:IE8以下で透過PNGが黒くなる場合の対処法 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with カエレバ西畑一馬 アスキー・メディアワークス 2013-03-07 Am […]

  4. 2014年6月27日

    […] 参考サイト:http://www.ateliee.com/archives/1093 […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です