如何解决/破解在IE8中褪色半透明的PNG错误？
如您所知，IE6有bug，无法显示半透明的PNG文件，而不使用非标准的风格，如filter。 在IE7中，这个问题是固定的。 但它仍然有一些关于PNG文件的bug。 它不能正确显示褪色半透明的PNG文件。 当你在jQuery中使用半透明的PNG文件使用show / hide函数时，你可以清楚地看到它。 图像的背景以不透明的黑色显示。
你有任何想法通过使用jQuery解决这个问题。
更新
让我们看看我的testing
替代文字http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png
如您所见，IE8总是错误地显示PNG-24图像。 而且，IE8在我淡入淡出（jQuery.fadeOut函数）的时候，仍然能够正确显示PNG-8图片。 但是，当我淡入淡出和resize（jQuery.hide函数）时，它不正确地显示PNG-8图像。
PS。 你可以从这里下载我的testing源代码。
谢谢，
嘿，我不知道你是否还在寻找答案。 几天前，我有同样的问题与内部PNG图像animation的div。 我尝试了很多解决scheme，唯一能正常工作的就是我自己编写的一个解决scheme。
这个问题似乎是IE浏览器缺乏不透明的支持和适当的PNG支持，所以它应用不透明效果后，打破PNG显示（我相信animation框架依赖于IE的不透明效应的专有MSIEfilter“AlphaImageLoader”）。 好奇的事情（对我来说还是不太明白）是这个问题可以通过使用相同的filter在animation之前加载图像来解决。
我写了一个简单的JavaScript，将filter应用于每个具有.PNG扩展名的图像。 我的animation在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 + "')"; } } } 请让我知道，如果你工作得很好，如果animation运行平稳。 亲切的问候！
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(); }
容易，快速和好:)
这个问题的根本原因似乎是Micrsoft IE对PNG alpha透明性（在任何版本的IE中）的支持不佳。 IE6是迄今为止最糟糕的罪犯，将alpha透明像素渲染为淡蓝色。 IE7和IE8处理PNG alpha透明度，但无法处理更改PNG中透明像素的不透明度 – 它们呈现为黑色而不是透明。
我自己的修复取决于情况。 这里有一些方法：
- 只需使用GIF。 GIF不会显得平滑（由于颜色深度有限），但是像素是完全透明的。
- 使用IE浏览器PNG修复可在这里： http : //git.twinhelix.com/cgit/iepngfix/ – 打开index.html并阅读评论。
- animationanimation，但不要animation不透明的PNG图像。
- 有条件地使用JavaScripttesting，有条件的注释或CSS的仅MSIE“行为”扩展来完成上述任何或所有操作。 以下是任何可能的工作：
条件评论：
<!-- 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行为的工作原理是将PNGreplace为空白图像（blank.gif），然后使用Microsoft的DXImageTransform例程将PNG作为filter加载到空白图像上。 还有其他的PNG修复工作，通过包装东西在div或跨度，但这些往往会打破你的布局，所以我避免他们。
希望这可以帮助。
我为IE 6/7/8pipe理了这个问题。
大致看起来像这样：
<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');
请注意，“filter”属性隐式只针对IE。
我使用这个function预载图片到画廊轮播。 这是基于AlejandroGarcíaIglesias的回答。 它在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错误时，我只是find了解决问题的方法。
最简单的方法就是像下面的代码那样定义当前图像的背景。 或者你可以在我的JsFiddle上看到完整的源代码和演示
#img2 { background:#fff; }
但是，如果你有一些像我的bug一样复杂的图像，你应该尝试在图像下添加几乎不可见的图层，并将背景颜色设置为你喜欢的颜色。
你为什么不尝试使用PNG8。 与GIF文件格式一样，PNG8被广泛称为全透明。 但是，使用Fireworks导出它可以像PNG24一样是半透明的 。 好处是，IE6显示半透明像素的PNG8，因为它是一个GIF – 或完全透明，但IE7和8显示正确的PNG24，如果你用jQuery或任何js库褪色它将不会显示背景与灰色，因为它不使用着名的filter属性。
我使用修改后的PNG修复IE6它工作得很好：
(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。 （一个透明的1×1 gif）
好处是，IE6显示半透明像素的PNG8，因为它是一个GIF – 或完全透明，但IE7和8显示正确的PNG24，如果你用jQuery或任何js库褪色它将不会显示背景与灰色，因为它不使用着名的filter属性。
IE中只有一种方法来进行不透明度转换。 filter：alpha（不透明:)。 jQuery应该怎么做呢？
到目前为止，我没有真正为我工作，我已经阅读通过CSS和透明的PNG结合了不透明度设置。 这个解决scheme最终在IE8的animation不透明页面上工作。 此页面上列出的其他解决scheme不起作用。
#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>
注意filter首先有Alphafilter，然后是AlphaImageLoader。
这可以类似于Stu在这里完成的： http : //www.cssplay.co.uk/menus/flyout_horizontal.html
即时通讯与IE8和IE7有同样恼人的问题..任何人testing，如果Cmc解决scheme的伎俩？
我的url是http://www.onlinebrand.dk （顶部菜单淡入，像谷歌:)但IE浏览器不关心。）
编辑：只是testing它自己，即使我设置的宽度和高度，以及重复IMG。 它不起作用
我只是发现了另一个工作，其中淡出包装，而不是与PNG图像的div。 而且它的工作，我现在在IE浏览器得到索姆透明度，但也有一些填充/边缘..完全奇怪..
比尔盖茨，这是怎么回事？ 我们为什么不能相处？
-
为您的图像定义一个固定的背景颜色：
.container img {background-color：white; }
-
将图像的background-image css属性定义为其src属性：
$（'img.png-trans'）。each（function（）{$（this）.css（'background-image'，$（this）.attr（'src'））;}）;
优点：你不需要改变你的标记
缺点：有时应用纯色背景色不是一个可接受的解决scheme。 通常是给我的
使用单位PNG修正半透明png-24。
