在IE8的PNG透明度问题(PNG transparency issue in IE8)

我在使用一个透明的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制作。

我读过的东西有关删除伽马，但显然是在Photoshop的早期版本中，当我在TweakPNG加载它，它没有伽马。

Answer 1:

固定！

我一直用同样的问题纠缠不休，并开了个突破！ 我们已经建立了，如果你给的图像背景颜色或图像时，PNG显示在它上面正常。 黑色的边框消失了，但现在你已经有了一个不透明的背景下，这几乎失败的目的。

这时我想起一个RGBA到我碰到即过滤器。 （由于是迈克尔·贝斯特）。 所以我想，如果我给我的问题png格式的，即过滤背景模拟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再见黑色，并招呼工作alpha通道和8淡出的PNG进出，或它们的动画在屏幕上 - 这一切都很好。

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:

在IE8 PNG透明度prоblеm

丹的解决方案为我工作。 我试图淡化与背景图像的DIV。 注意事项：不能直接褪去格，而不是淡出包装图像。 此外，添加以下过滤器应用的背景图像：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */      

请注意，在过滤器的SRC属性的路径是绝对的，而不是相对的CSS表。

我还补充说：

background: transparent\9;

这会导致IE忽略我先前的实际背景图像的声明的其他浏览器。

感谢丹！

Answer 6:

请尝试以下代码。

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   

Answer 7:

丹·特洛修复工作很适合我。

一个额外的问题，我发现用IE8是，如果PNG是在一个DIV举行了小CSS的宽度或高度尺寸比PNG那么黑边概率被重新触发。

校正的宽度和高度CSS或完全移除固定。

Answer 8:

我使用的是CSS修复，而不是JS要解决我的里面透明的PNG，圆角的层

尝试

.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}

这可能需要IE9或更高版本更多的工作。

Answer 9:

只想补充（因为我用Google搜索这个问题，而这个问题又冒出第一）IE6和其他版本呈现PNG透明度非常难看。 如果你有PNG图像是阿尔法透明（32位）和要显示它在一些复杂的背景，你永远无法做到这一点只需在IE浏览器。 但是你可以在正确的单色背景，只要你设置PNG图像（或div的）CSS属性显示它background-color是一样的家长background-color 。

所以其中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加载了并呈现一定的不透明度的图像。 这工作，直到你想改变这种不透明......问题的细节和其解决方案（JavaScript的），可以发现这里 。

Answer 10:

我的情况：

• 我有有这样的设置为一个锚链接24位阿尔法PNG的背景图像。
• 锚正在使用jQuery消失在悬停。

例如。

a.button { background-image: url(this.png; }

我发现，使用由丹特洛提供的加价没有工作。

但是，通过将跨度锚元素中，并设置背景图片到该元素我是能够实现使用丹特洛的标记了良好的效果。

例如。

a.button span { background-image: url(this.png; }

文章来源: PNG transparency issue in IE8