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
- com4tis：IE8以下で透過PNGにopacityで黒い線が出る
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に適用されません。
