如何解决/破解 IE8 中半透明 PNG 褪色问题？

发布于 2024-07-29 19:49:49 字数 976 浏览 9 评论 0原文

如您所知，IE6 有一个 bug，如果不使用滤镜等非标准样式，就无法显示半透明 PNG 文件。在 IE7 中，此问题已得到修复。但它仍然存在一些关于 PNG 文件的错误。它无法正确显示褪色的半透明 PNG 文件。当您在 jQuery 中使用半透明 PNG 文件的显示/隐藏功能时，您可以清楚地看到它。图像的背景以不透明的黑色显示。

您有任何想法使用 jQuery 来解决这个问题吗？

更新

让我们看看我的测试

替代文本 http ://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

如您所见，IE8 总是错误地显示 PNG-24 图像。此外，仅当我淡入淡出（jQuery.fadeOut 函数）时，IE8 仍然可以正确显示 PNG-8 图像。但当我淡入淡出时，它会错误地显示 PNG-8 图像。同时调整大小（jQuery.hide 函数）。

附言。您可以从此处。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

轻拂→两袖风尘 2024-08-05 19:49:49

嘿，我不知道你是否还在寻找答案。几天前，我在使用 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 + "')";
        }
    }
}

请告诉我是否适合您以及动画是否运行顺利。
亲切的问候！

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.

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.

I wrote a simple javascript that applies the filter to every image with .PNG extension. My animations run fine on IE with it.

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).

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!

回复收藏 0 原文

若言繁花未落 2024-08-05 19:49:49

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();
}

简单、快速、漂亮:)

HTML

   <img src="image.png" class="iefix" width="16" height="16" />

in CSS

.iefix
{
 /* IE hack */
  background:none\9; /* Targets IE only */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

easy, fast and nice :)

回复收藏 0 原文

樱花细雨 2024-08-05 19:49:49

我已经在 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');

请注意，“filter”属性隐式仅针对 IE。

I've managed a fix to this issue for 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\9; /* 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.

回复收藏 0 原文

独留℉清风醉 2024-08-05 19:49:49

该问题的根本原因似乎是 Microsoft IE 对 PNG alpha 透明度的支持不佳（在任何版本的 IE 中）。 IE6 是迄今为止最严重的违规者，它将 alpha 透明像素渲染为淡蓝色。 IE7 和 IE8 可以处理 PNG alpha 透明度，但无法处理更改 PNG 中 alpha 透明像素的不透明度 - 它们渲染为黑色而不是透明。

我自己对此的修复取决于具体情况。以下是一些方法：

只需使用 GIF。 GIF 不会显得那么平滑（因为颜色深度有限），但像素是完全透明的。
使用此处提供的 IE PNG 修复：http://git.twinhelix.com/cgit/iepngfix/——打开index.html并阅读注释。
对运动进行动画处理，但不对 PNG 图像的不透明度进行动画处理。
使用 JavaScript 测试、条件注释或 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 行为的工作原理是用空白图像 (blank.gif) 替换 PNG，然后使用 Microsoft 的 DXImageTransform 例程将 PNG 加载为对空白图像进行过滤。还有其他 PNG 修复程序，它们通过将内容包装在 div 或 span 中来工作，但这些通常会破坏您的布局，所以我避免使用它们。

希望这可以帮助。

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.

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:

Conditional comments:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

In the css:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

Via JavaScript detection:

<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.

Hope this helps.

回复收藏 0 原文

天冷不及心凉 2024-08-05 19:49:49

我使用此功能将图像预加载到画廊轮播中。它基于 Alejandro García Iglesias 上面的回答。它摆脱了 IE 6 和 IE 中的“黑色光环”。 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');

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.

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');

回复收藏 0 原文

独木成林 2024-08-05 19:49:49

我只是在尝试修复下图中的 IE8 bug 时偶然发现了解决问题的方法。

在此处输入图像描述

最简单的方法，您只需定义当前图像的背景，如下面的代码所示。或者您可以在我的 JsFiddle 上查看完整源代码和演示

#img2
{
    background:#fff;   
}

但是，如果您有一些复杂的像我的错误一样，您应该尝试在图像下方添加几乎不可见的图层，并将背景颜色设置为您喜欢的颜色。

在此处输入图像描述

I just found the way to solve problem by chance when I try to fix IE8 bug in the following image.

enter image description here

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

#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.

enter image description here

回复收藏 0 原文

话少情深 2024-08-05 19:49:49

你为什么不试试 PNG8。 PNG8 与 GIF 文件格式一样被广泛认为是完全透明的。然而，使用 Fireworks 导出可以半透明，如 PNG24。优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库淡入淡出它，它将不会显示背景与灰色，因为它不使用著名的 -filter 属性。

回复收藏 0 原文

日久见人心 2024-08-05 19:49:49

我使用针对 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）

i use a modified PNG fix for IE6 it works just great:

(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)

回复收藏 0 原文

[旋木] 2024-08-05 19:49:49

优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库淡入淡出它，它将不会用灰色显示背景，因为它没有使用著名的 -filter 属性。

IE 中只有一种方法可以进行不透明度变换。过滤器：alpha（不透明度：）。
jQuery 还应该怎么做呢？

回复收藏 0 原文

懵少女 2024-08-05 19:49:49

到目前为止，没有什么真正对我有用，我已经阅读了通过 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。

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.

#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.

回复收藏 0 原文

好听的两个字的网名 2024-08-05 19:49:49

这可以类似于 Stu 在此处所做的操作：http://www.cssplay。 co.uk/menus/flyout_horizontal.html

回复收藏 0 原文

并安 2024-08-05 19:49:49

我在 IE8 和 IE7 上也遇到了同样烦人的问题。有人测试过 Cmc 解决方案是否有效吗？

我的网址是 http://www.onlinebrand.dk （顶部菜单淡入，就像 Google :) 但 IE不在乎。）

编辑：刚刚自己测试过，即使我设置了重复的img的宽度和高度。它不起作用，

我刚刚找到了另一种解决方法，其中 Fadein 是一个包装器，而不是带有 .png bg 图像的 div。它有点起作用，我现在在 IE 中获得了某种透明度，而且还有一些填充/边距..完全奇怪..

比尔·盖茨，这是怎么回事？为什么我们不能和睦相处？

回复收藏 0 原文

以往的大感动 2024-08-05 19:49:49

为图像定义纯色背景色：
.container img {
背景颜色：白色；
}
图像的 background-image css 属性定义为其 src 属性：
$('img.png-trans').each(function() {
$(this).css('背景图像', $(this).attr('src'));
});

优点：您不需要更改标记

缺点：有时应用纯色背景不是可接受的解决方案。通常是给我的。