IE8中的PNG透明度问题

Question

我遇到透明PNG图像的问题,在图像的非透明部分的边缘周围显示黑色抖动像素伪像.它只能在Internet Explorer中执行此操作,并且只能从它使用的Javascript文件中执行此操作.

这就是我所说的...... http://70.86.157.71/test/test3.htm(现在链接死了)......注意右下角的那个女孩.她在IE8中有她周围的文物(我没有在IE的早期版本中测试它,但我假设它可能会做同样的事情).它在Firefox和Chrome中完美运行.图像从Javascript文件加载以产生鼠标悬停效果.

如果你自己加载图像,它工作正常.这是图像...... http://70.86.157.71/test/consultant2.png

如何解决这个问题？

该图像是在Photoshop CS3中生成的.

我已经阅读了关于删除Gama的内容,但显然是在以前版本的Photoshop中,当我在TweakPNG中加载它时,它没有Gama.

Answer 1

固定!

我一直在努力解决同样的问题,并取得了突破!我们已经确定,如果您为图像提供背景颜色或图像,则png会在其上方正确显示.黑色边框消失了,但现在你的背景不透明了,这几乎打败了目的.

然后我想起了我遇到的rgba即滤波器转换器.(感谢Michael Bester).所以我想知道如果我给我的问题pngs会发生什么,即过滤后的背景模拟rgba(255,255,255,0),完全期望它不起作用,但让我们试试吧...

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

普雷斯托!在ie7和8中再见黑色和你好工作的alpha通道.淡入你的pngs,或者在屏幕上制作动画 - 这一切都很好.

Answer 2

我将它放入一个jQuery插件,使其更加模块化(你提供透明的gif):

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

用法:

$('.my-selector').pngFix();

注意:如果您的图像是背景图像,它也适用.只需在div上应用该功能即可.

Answer 3

我知道这个帖子已经死了一段时间,但这是旧的ie8 png背景问题的另一个答案.

您可以使用IE的专有过滤系统在CSS中执行此操作:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

DEMO

您需要在背景声明中使用blank.gif作为"第一个"图像.这只是为了混淆ie8并防止它同时使用过滤器和你设置的背景,并且只使用过滤器.其他浏览器支持多个背景图像,并且将理解背景声明而不理解过滤器,因此仅使用背景.

您可能还需要在过滤器中使用sizingMethod以使其按您希望的方式工作.

Answer 4

我有同样的事情发生在PNG上,透明度被设置为应用了不透明度的<A>元素的背景图像.

修复方法是设置<A>元素的背景颜色.

那么,以下内容:

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

变成:

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

Answer 5

只是想补充一下（因为我用谷歌搜索了这个问题，并且这个问题首先出现）IE6和其他版本渲染PNG透明度非常难看。如果您有 alpha 透明（32 位）的 PNG 图像，并且想要在某些复杂的背景上显示它，那么您永远无法在 IE 中简单地执行此操作。但是，只要将 PNG 图像（或 div）CSS 属性设置background-color为与parent 相同，就可以在单色背景上正确显示它background-color。

因此，这将在图像应该是 alpha 透明的地方呈现黑色，在 alpha 字节为 0 的地方呈现透明：

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

这将正确渲染（注意内部 div 中的背景颜色属性）：

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

复杂的替代方案是使用AlphaImageLoader加载和渲染特定不透明度的图像来在复杂的背景上启用 alpha 图像。这一直有效，直到您想要更改不透明度为止...可以在此处找到详细问题及其解决方案（javascript）。