Help us understand the problem. What is going on with this article?

IE8 で 透過PNG に jQuery で フェード効果 をかけた際、透過部分が黒くなった場合の対処法

More than 5 years have passed since last update.

IE8 の場合だけ直接画像に対して以下の JavaScript が動作すようにする。
実際使うときは$( 'img.png' ) のようにクラスを当てて PNG 画像のみに効くようにさせる。

//Javascript
$( 'img' ).each(function(){
    $( this ).css({
        'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + $( this ).attr( 'src' ) + '", sizingMethod="scale");'
    });
});

実装時の注意
次のようなHTMLがあったとして

<div class="img_wrap">
    <img src="Logo.png" class="png">
</div>

フェード効果をかける場合は次のように PNG画像 を囲っている要素 ( 上の場合 div ) にあてるとキレイにフェードしてくれます。

//Javascript
$( 'img_wrap' ).fadeIn(10000);

次のようにすると効果がなくなる

1.CSSで画像に position: absolute をあてている場合。

img{
    position: absolute;
}

2.フェード効果を加える対象(ここでは div )の子要素に position: absolute をあてている要素が含まれる場合。
フェードする際だけJavaScriptで absolute のあたっている子要素を static に変更するなどすると解決する。

<div>
    <p>
        <img src="Logo.png" class="png">
    </p>
</div>
div{
    /*いろいろ*/
}
p{
    position: absolute;
}

3.フェード効果を画像に直接かける

//Javascript
$( 'img' ).fadeIn(10000);
googflog
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away