> CSS > IE8以下で透過PNG利用時にopacityすると透明部分が黒く表示される時の対処法

IE8以下で透過PNG利用時にopacityすると透明部分が黒く表示される時の対処法

IE8以下で透過pngのopacityを変更すると、透明部分が黒く表示されます。
透明部分に黒が表示されないようにするための対処法は以下のとおりです。

CSSで透過png画像部分のbackgroundを指定する方法

透過png画像のbackgroundに色や画像を指定すると、透過部分が黒くなる現象を回避することができます。

imgタグに透過画像を利用している場合

【HTML】

<img src="sample.png" alt="透過png" />

【CSS】

img{
    background: #fff; /* 背景を白色で表示 */
}

背景に透過画像を利用している場合

【HTML】

<div class="sample"></div>

【CSS】

div.sample{
    background-color: #fff;            /* 背景を白色で表示 */
    background-image: url(sample.png); /* 透過png */
}

参考URL

jQueryで透過pngにfilterを適用する方法

透過pngにfilterを適用すると、透過部分が黒くなる現象を回避することができます。

全てのimgタグの内、pngのみにfilterを適用するjQuery

下記のソースを<head>~</head>内に記述するか、外部jsで読み込んでください。

// for IE png
jQuery(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        jQuery('img').each(function() {
            if(jQuery(this).attr('src').indexOf('.png') != -1) {
                jQuery(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + jQuery(this).attr('src') + '", sizingMethod="scale");'
                });
            }
        });
    }
});

なお、この方法ではbackgroundは利用されている透過pngに適用されません。

参考URL

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)