I'll be NET】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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

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

関連記事

ulリストのliアイテムを横並びにする方法あれこれ

iphone の safari でアドレスバーや標準メニューが消えない時に確認した方がいいCSSの設定

HTMLとCSSで半角英数が連続する場合の文章の折返しを自由自在にコントロールする方法

pixiv小説のように縦書きの文章の中でCSSで縦中横に表示してみる。

pixiv小説のようにCSS3だけでHTMLを縦書き表示してみる。

欲しいアイコンだけ選んでWEBフォント化してくれる便利サイト【Fontello】

Comment Form

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

Profile

yuricolo@I'll be NET

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。