如您所知，IE6 存在不使用非标准样式（如过滤器）无法显示半透明 PNG 文件的错误。在 IE7 中，此问题已得到修复。但它仍然有一些关于 PNG 文件的错误。它无法正确显示褪色的半透明 PNG 文件。当您在带有半透明PNG文件的jQuery中使用显示/隐藏功能时，您可以清楚地看到它。图像背景以不透明的黑色显示。
你有什么想法可以用 jQuery 来解决这个问题吗？
更新
让我们看看我的测试
如您所见，IE8 总是错误地显示 PNG-24 图像。此外，IE8 仅在我淡入淡出（jQuery.fadeOut 函数）时仍能正确显示 PNG-8 图像。但是当我同时淡入淡出和调整大小（jQuery.hide 函数）时，它会错误地显示 PNG-8 图像。
PS。你可以从here下载我的测试源代码。
谢谢，
【问题讨论】：
标签： jquery internet-explorer png
您为什么不尝试使用 PNG8。 PNG8 与 GIF 文件格式一样被广泛称为完全透明。但是使用 Fireworks 导出它can be semi-transparent as is PNG24。优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库将其淡化，则不会显示背景用灰色，因为它没有使用著名的 -filter 属性。
【讨论】：
优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库将其淡化，它将不会用灰色显示背景，因为它没有使用著名的 -filter 属性。
在 IE 中只有一种方法可以进行不透明度转换。过滤器：阿尔法（不透明度：）。 jQuery 还应该怎么做呢？
【讨论】：
我已针对 IE 6/7/8 修复了此问题。
大概是这样的：
<div class="wrapper">
<div class="image"></div>
</div>
...
/* I had to explicitly specify the width/height by pixel */
.wrapper
{
width:100px;
height:100px;
}
.image
{
width:100%;
height:100%;
background:transparent url('image.png') no-repeat;
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}
...
$(".wrapper").fadeOut('slow');
请注意，“过滤器”属性隐式仅针对 IE。
【讨论】：
我为 IE6 使用了一个修改过的 PNG 修复程序，效果很好：
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
别忘了上传 x.gif。 （一个透明的 1x1 gif）
【讨论】：
我在使用 IE8 和 IE7 时遇到了同样烦人的问题。有人测试过 Cmc 解决方案是否可以解决问题？
我的网址是http://www.onlinebrand.dk（顶部菜单淡入，就像谷歌一样：）但 IE 不在乎。）
编辑：我自己测试了一下，即使我设置了宽度和高度，以及重复的 img。它不起作用
我刚刚找到了另一种解决方法，其中 Fadein 是一个包装器，而不是带有 .png bg 图像的 div。它有点奏效，我现在在 IE 中获得了某种透明度，而且还有一些填充/边距..完全奇怪..
比尔盖茨，这是怎么回事？为什么我们不能相处？
【讨论】：
这可以与 Stu 在这里所做的类似：http://www.cssplay.co.uk/menus/flyout_horizontal.html
【讨论】：
嘿，我不知道你是否还在寻找答案。几天前，我在为一个带有 PNG 图像的 div 设置动画时遇到了同样的问题。我尝试了许多解决方案，唯一一个运行良好的解决方案是我自己编写的。
问题似乎是 IE 缺乏不透明度支持和正确的 PNG 支持，因此在应用不透明效果后会破坏 PNG 显示（我相信动画框架依赖于专有的 MSIE 过滤器“AlphaImageLoader”在 IE 上实现不透明效果）。奇怪的是（对我来说还是不太明白）这个问题可以使用相同的过滤器在动画之前加载图像来解决。
我编写了一个简单的 javascript，它将过滤器应用于每个带有 .PNG 扩展名的图像。我的动画在 IE 上运行良好。
我复制下面的代码。我不依赖于框架（它是纯 JavaScript），但你必须将它放在框架的 DOM 就绪事件中（或者像我一样使用 domready.js）。
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
请让我知道是否适合您以及动画是否流畅运行。 亲切的问候！
【讨论】：
<img> tags。
我使用此功能将图像预加载到画廊轮播中。它基于上面的 Alejandro García Iglesias 的回答。它摆脱了 IE 6 & 8 中的“黑色光环”。
function preloadImages(id) {
var c = new Array();
$(id+' img').each( function(j) {
c[j] = new Image();
c[j].src = this.src;
if ( $.browser.msie ) {
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='"+ this.src +"')";
}
});
}
这样调用：
preloadImages('#Stage');
【讨论】：
当我尝试修复下图中的 IE8 错误时，我偶然发现了解决问题的方法。
最简单的方法，您只需像下面的代码一样定义当前图像的背景。或者你可以看full source code and demo on my JsFiddle
#img2
{
background:#fff;
}
但是，如果您有一些像我的错误这样的复杂图像，您应该尝试在图像下方添加几乎不可见的图层并将背景颜色设置为您喜欢的颜色。
【讨论】：
问题的根本原因似乎是 Micrsoft IE 对 PNG alpha-transparency 的支持不佳（在任何版本的 IE 中）。 IE6 是迄今为止最严重的违规者，它将 alpha 透明像素呈现为淡蓝色。 IE7 和 IE8 处理 PNG alpha-transparency，但无法处理更改 PNG 中 alpha-transparent 像素的不透明度——它们呈现为黑色而不是透明。
我自己对此的修复取决于具体情况。以下是一些方法：
条件 cmets：
<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->
在css中：
/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }
通过 JavaScript 检测：
<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>
iepngfix.htc 行为的工作原理是将 PNG 替换为空白图像 (blank.gif)，然后使用 Microsoft 的 DXImageTransform 例程将 PNG 作为过滤器加载到空白图像上。还有其他一些 PNG 修复方法，它们通过将内容包装在 div 或 span 中来工作，但这些修复通常会破坏您的布局，所以我避免使用它们。
希望这会有所帮助。
【讨论】：
HTML
<img src="image.png" class="iefix" width="16" height="16" />
在 CSS 中
.iefix
{
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}
简单、快速、美观:)
【讨论】：
为您的图像定义纯色背景色：
.container img { 背景颜色：白色； }
将图像的 background-image css 属性定义为它的 src 属性：
$('img.png-trans').each(function() { $(this).css('背景图片', $(this).attr('src')); });
优势：您无需更改标记
缺点：有时应用纯色背景颜色不是可接受的解决方案。通常是给我的。
【讨论】：
到目前为止，我已经阅读了通过 CSS 结合不透明度设置和透明 PNG 的文章，没有什么对我真正有用。这个解决方案最终在 IE8 上的动画不透明度页面上为我工作。此页面上列出的其他解决方案无效。
#img {
background:transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; /* IE8 */
zoom:1;
width:600px;
height:400px;
}
<div id='img'></div>
注意过滤器首先有一个 Alpha 过滤器，然后是 AlphaImageLoader。
【讨论】：
使用Unit PNG Fix 表示半透明的 png-24。
【讨论】：