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;

}

的Presto！在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发生了同样的事情，该PNG被设置为＆lt; A＆gt;的背景图像。应用了不透明度的元素。

修复方法是设置＆lt; A＆gt;的背景颜色。元件。

所以，以下内容：

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

PNG transparency prоblеm in IE8

丹的解决方案对我有用。我试图用背景图像淡化div。注意事项：你不能直接淡化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忽略我之前对其他浏览器的实际背景图像的声明。

谢谢Dan !!!

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

Dan Tello修复工作对我很有用。

我在IE8中发现的另一个问题是，如果PNG保存在CSS宽度或高度尺寸小于PNG的DIV中，则会重新触发黑边问题。

修正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

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

因此，这将呈现黑色，其中图像应该是alpha透明的，而透明的是alpha字节为0：

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

这将正确呈现（注意内部div中的background-color属性）：

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

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

Answer 10

我的情景：

我有一张背景图片设置为a的24位alpha png 锚链接。
锚正在使用Jquery在悬停时消失。

例如

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

我发现使用Dan Tello提供的加价不起作用。

但是，通过在锚元素中放置一个span，并将background-image设置为该元素，我可以使用Dan Tello的标记获得良好的结果。

例如

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

IE8中的PNG透明度问题

10 个答案: