IE8以下で透過PNGが黒くなる場合の対処法
こんにちわ。film Power Rangers
今回は透過PNGを使った場合に陥りやすいバグの対応方法についてご紹介いたします。
IE8やIE7などで透過pngを使った場合、背景が黒くなる場合があります。
opacityなどの透過指定をしている場合にもおきるかもしれません。
そういった場合、IE独自の指定をする必要があります。
[css]
img.png{
filter’: ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”sample.png”, sizingMethod=”scale”);
}
[/css]
CSSにて透過PNGを使っている要素にprogid:DXImageTransformのfilterを指定してあげます。
ただ最近のサイトは大量に透過PNGを使用している場合があるので、いちいち指定するのが面倒だという人は、
javascriptにて簡単に対応できるのでお勧めです。
[html]
// for IE
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”);’
});
}
});
}
});
[/html]
上記のスクリプトを読み込むだけで自動的に透過PNGを配置している要素に対してfilterが適応されます。
jQueryを使用しているので別途jQuery.jsをダウンロードして下さいね。
ちなみにこちらのスクリプトでは背景に透過PNGを指定してる場合うまく動作しない場合があります。
そんなときは下記のような便利なプラグインがありますので、ご参考下さい。
jQuery.belatedPNG
EATTTT – パズルでペットを育てよう
Harding – なぞって囲って増やして、放牧生活
Petective – 保護猫専用写真共有アプリ
4件のフィードバック
[…] 引用もとはこちらです↓ http://www.ateliee.com/archives/1093 […]
[…] こちらの記事で対策方法が書かれています。 http://www.ateliee.com/archives/1093 […]
[…] 参考サイト：IE8以下で透過PNGが黒くなる場合の対処法 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with カエレバ西畑一馬 アスキー・メディアワークス 2013-03-07 Am […]
[…] 参考サイト：http://www.ateliee.com/archives/1093 […]