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

記事移動

関連記事

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

【CSS3】word-wrap:break-word;とword-break:break-allで文字を折り返して表示する方法

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

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

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

WEBデザイナー必見!CSSジェネレータ集

Comment Form

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

ユーティリティ

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

プロフィール

author:I'll be NET

since:2014.01.01

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

more

Feed