jQuery 如何解决/破解 IE8 中淡入淡出的半透明 PNG 错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1204457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to solve/hack fading semi-transparent PNG bug in IE8?
提问by Soul_Master
As you know, IE6 has bug that can't display semi-transparent PNG file without using non-standard style like filter. In IE7, this problem is fixed. But It still has some bug about PNG file. It can't correctly display fading semi-transparent PNG file. You can clearly see it when you use show/hide function in jQuery with semi-transparent PNG file. The background of image is displayed with non-transparent black color.
如您所知，IE6 有一个错误，即在不使用过滤器等非标准样式的情况下无法显示半透明 PNG 文件。在 IE7 中，此问题已修复。但它仍然有一些关于 PNG 文件的错误。它无法正确显示褪色的半透明 PNG 文件。当您在带有半透明 PNG 文件的 jQuery 中使用显示/隐藏功能时，您可以清楚地看到它。图像的背景以不透明的黑色显示。
Do you have any idea for solve this question by using jQuery.
您对使用 jQuery 解决这个问题有什么想法吗？
Update
更新
Let's see my testing
让我们看看我的测试
As you see, IE8 always incorrectly displays PNG-24 image. Moreover, IE8 still correctly display PNG-8 image when I fade(jQuery.fadeOut function) it only. But It incorrectly display PNG-8 image when I fade & resize(jQuery.hide function) at the same time.
如您所见，IE8 总是错误地显示 PNG-24 图像。此外，仅当我淡入淡出（jQuery.fadeOut 函数）时，IE8 仍然可以正确显示 PNG-8 图像。但是当我同时淡入淡出和调整大小（jQuery.hide 函数）时，它会错误地显示 PNG-8 图像。
PS. You can download my testing source code from here.
附注。你可以从这里下载我的测试源代码。
Thanks,
谢谢，
采纳答案by Soul_Master
I just found the way to solve problem by chance when I try to fix IE8 bug in the following image.
当我尝试修复下图中的 IE8 错误时，我偶然发现了解决问题的方法。
The easiest way, You just define background of current image like the below code. Or you can see full source code and demo on my JsFiddle
最简单的方法，您只需像下面的代码一样定义当前图像的背景。或者你可以在我的 JsFiddle 上看到完整的源代码和演示
#img2
{
background:#fff;
}
However, if you have some complex image like my bug, you should try to add almost invisible layer below your image and set background color to some color that you like.
但是，如果您有一些像我的 bug 一样的复杂图像，您应该尝试在图像下方添加几乎不可见的图层，并将背景颜色设置为您喜欢的某种颜色。
回答by Alejandro García Iglesias
Hey, I don't know if you're still looking for an answer. A couple of days ago I had the same issue animating a div with a PNG image inside. I tried many solutions and the only one that worked fine is one I coded myself.
嘿，我不知道你是否还在寻找答案。几天前，我在使用 PNG 图像为 div 设置动画时遇到了同样的问题。我尝试了很多解决方案，唯一一个运行良好的是我自己编写的。
The issue seems to be IE lacking opacity support and proper PNG support, so it breaks PNG display after applying an opacity effect (I believe animation frameworks rely on the propietary MSIE filter "AlphaImageLoader" for opacity effect on IE). The curious thing (to me that still don't understand very well) is that this issue can be solved using the same filter to load the image before the animation.
问题似乎是 IE 缺乏不透明度支持和适当的 PNG 支持，因此在应用不透明效果后它会破坏 PNG 显示（我相信动画框架依赖于专有的 MSIE 过滤器“AlphaImageLoader”在 IE 上实现不透明效果）。奇怪的是（对我来说仍然不太明白）可以使用相同的过滤器在动画之前加载图像来解决这个问题。
I wrote a simple javascript that applies the filter to every image with .PNG extension. My animations run fine on IE with it.
我编写了一个简单的 javascript，将过滤器应用于每个带有 .PNG 扩展名的图像。我的动画在 IE 上运行良好。
I copy the code below. I'ts framework independent (it's pure JavaScript), but you have to put it inside your framework's DOM ready event (or use domready.js, like I did).
我复制下面的代码。Its 独立于框架（它是纯 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 + "')";
}
}
}
Please let me know if worked fine for you and if animation runned smooth. Kind regards!
请告诉我是否适合您以及动画是否流畅。亲切的问候！
回答by xsor
HTML
HTML
<img src="image.png" class="iefix" width="16" height="16" />
in CSS
在 CSS 中
.iefix
{
/* IE hack */
background:none; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}
easy, fast and nice :)
简单，快速，漂亮:)
回答by Zee
The root cause of the problem appears to be Micrsoft IE's poor support for the PNG alpha-transparency (in any version of IE). IE6 is the worst offender by far, rendering alpha-transparent pixels as a pale blue color. IE7 and IE8 handle PNG alpha-transparency, but can't handle changing the opacity of an alpha-transparent pixel in the PNG – they render as black instead of transparent.
问题的根本原因似乎是 Micrsoft IE 对 PNG alpha 透明度（在任何版本的 IE 中）的支持不佳。IE6 是迄今为止最严重的违规者，将 alpha 透明像素呈现为淡蓝色。IE7 和 IE8 处理 PNG alpha 透明度，但无法处理更改 PNG 中 alpha 透明像素的不透明度——它们呈现为黑色而不是透明。
My own fixes for this depend on the situation. Here are some approaches:
我自己对此的修复取决于具体情况。以下是一些方法：
- Just use a GIF. GIFs won't appear as smooth (because of limited color depth), but the pixels are fully transparent.
- Use the IE PNG fix available here: http://git.twinhelix.com/cgit/iepngfix/-- open up index.html and read the comments.
- Animate motion, but don't animate opacity of PNG images.
- Conditionally do any or all of the above using either JavaScript tests, conditional comments, or the MSIE-only "behavior" extension to CSS. Here's how any of that might work:
- 只需使用 GIF。GIF 不会显得平滑（因为有限的颜色深度），但像素是完全透明的。
- 使用此处提供的 IE PNG 修复：http: //git.twinhelix.com/cgit/iepngfix/——打开 index.html 并阅读评论。
- 动画动画，但不要动画 PNG 图像的不透明度。
- 使用 JavaScript 测试、条件注释或 CSS 的仅限 MSIE 的“行为”扩展，有条件地执行上述任何或所有操作。以下是其中任何一项的工作方式：
Conditional comments:
有条件的评论：
<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->
In the css:
在CSS中：
/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }
Via JavaScript detection:
通过 JavaScript 检测：
<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>
The iepngfix.htc behavior works by replacing the PNG with a blank image (blank.gif) and then using Microsoft's DXImageTransform routines to load the PNG as a filter on the blank image. There are other PNG fixes out there which work by wrapping things in divs or spans, but those will often break your layout, so I avoid them.
iepngfix.htc 行为的工作原理是用空白图像 (blank.gif) 替换 PNG，然后使用 Microsoft 的 DXImageTransform 例程将 PNG 作为过滤器加载到空白图像上。还有其他 PNG 修复程序，它们通过将内容包装在 div 或 span 中来工作，但这些通常会破坏您的布局，因此我避免使用它们。
Hope this helps.
希望这可以帮助。
回答by Cmc
I've managed a fix to this issue for IE 6/7/8.
我已经为 IE 6/7/8 解决了这个问题。
Roughly looks like this:
大致是这样的：
<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; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}
...
$(".wrapper").fadeOut('slow');
Note that the "filter" attribute implicitly targets IE only.
请注意，“过滤器”属性仅隐式针对 IE。
回答by Benxamin
I used this function to preload images into gallery carousel. It's based on Alejandro García Iglesias's answer above. It got rid of the "black halo" in IE 6 & 8.
我使用此功能将图像预加载到画廊轮播中。它基于 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 +"')";
}
});
}
Call like this:
像这样调用：
preloadImages('#Stage');
回答by stoimen
Why don't you try with PNG8. PNG8 is widely known as full transparent as is GIF file format. However exported with Fireworks it can be semi-transparent as is PNG24. The advantage is that IE6 displays the PNG8 with semi-transparent pixels as it is a GIF - or with full transparency, but IE7 and 8 display it correctly as PNG24 and if you fade it with jQuery or whatever js library it will no display the background with gray, because it does not use the famous -filter property.
为什么不尝试使用 PNG8。PNG8 和 GIF 文件格式一样被广泛认为是完全透明的。然而，使用 Fireworks 导出它可以是半透明的，就像 PNG24 一样。优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库淡化它，它将不会显示背景使用灰色，因为它没有使用著名的 -filter 属性。
回答by meo
i use a modified PNG fix for IE6 it works just great:
我对 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);
dont forget to upload x.gif. (a transparent 1x1 gif)
不要忘记上传x.gif。（一个透明的 1x1 gif）
回答by Erik
The advantage is that IE6 displays the PNG8 with semi-transparent pixels as it is a GIF - or with full transparency, but IE7 and 8 display it correctly as PNG24 and if you fade it with jQuery or whatever js library it will no display the background with gray, because it does not use the famous -filter property.
优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库淡化它，它将不会显示背景使用灰色，因为它没有使用著名的 -filter 属性。
There is only one way in IE to do an opacity transform. filter: alpha(opacity:). How else should jQuery do this?
在 IE 中只有一种方法可以进行不透明度变换。过滤器：alpha（不透明度：）。jQuery 还应该如何做到这一点？
回答by Greg Tatum
Nothing really worked for me so far that I've read combining both opacity settings through CSS, and transparent PNGs. This solution ended up working for me on an animated opacity page on IE8. Other solutions listed on this page didn't work.
到目前为止，我已经阅读了通过 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>
Note the filter has an Alpha filter first, then the AlphaImageLoader.
注意过滤器首先有一个 Alpha 过滤器，然后是 AlphaImageLoader。
