76

我在使用透明 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。

4

10 回答 10

106

固定的！

我一直在努力解决同样的问题，并且刚刚取得了突破！我们已经确定，如果您为图像提供背景颜色或图像，则 png 会正确显示在其顶部。黑色边框消失了，但现在你有了一个不透明的背景，这几乎没有达到目的。

然后我想起了我遇到的一个 rgba to ie filter 转换器。（感谢迈克尔·贝斯特）。所以我想知道如果我给我的问题 pngs 一个模拟 rgba(255,255,255,0) 的 ie 过滤背景会发生什么，完全期望它不起作用，但无论如何让我们尝试一下......

.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 通道。淡入淡出你的 png，或者在屏幕上为它们设置动画——这一切都很好。

于 2010-10-22T18:33:50.730 回答
9

我将它放入一个 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 上应用该功能。

于 2011-02-08T21:19:26.493 回答
7

我知道这个线程已经死了一段时间，但这是旧 ie8 png 背景问题的另一个答案。

您也可以使用 IE 的专有过滤系统在 CSS 中执行此操作，如下所示：

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

演示

您需要为背景声明中的“第一个”图像使用空白.gif。这只是为了混淆ie8，阻止它同时使用你设置的滤镜和背景，只使用滤镜。其他浏览器支持多个背景图像，并且会理解背景声明而不理解过滤器，因此仅使用背景。

您可能还需要在过滤器中使用 sizingMethod 以使其以您想要的方式工作。

于 2012-08-08T15:48:07.727 回答
5

我对具有透明度的 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: ...;
于 2012-05-17T20:47:40.530 回答
4

IE8 中的 PNG 透明度问题

丹的解决方案对我有用。我试图淡化带有背景图像的 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 忽略我之前为其他浏览器声明的实际背景图像。

谢谢丹！！！

于 2011-05-12T19:28:09.897 回答
4

请尝试以下代码。

 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 */
于 2013-04-10T13:46:40.923 回答
2

Dan Tello 修复对我来说效果很好。

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

更正宽度和高度 CSS 或完全修复它们。

于 2011-02-25T05:23:37.057 回答
2

我使用 CSS 修复而不是 JS 来解决内部带有透明 PNG 的圆角图层

尝试

.ie .whateverDivWrappingTheImage img {
背景：#ffaabb；/* 这应该是与您的设计实际匹配的背景颜色 */
过滤器：色度（#ffaabb）；/* 这应该匹配你在背景颜色中输入的任何值 */
}

这可能需要在 ie9 或更高版本上进行更多工作。

于 2012-01-30T03:01:29.370 回答
0

我的场景：

  • 我有一个背景图像，它有一个设置为锚链接的 24 位 alpha png。
  • 使用 Jquery 悬停时锚点正在淡入。

例如。

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

我发现应用 Dan Tello 提供的标记不起作用。

但是，通过在锚元素中放置一个跨度，并将背景图像设置为该元素，我能够使用 Dan Tello 的标记获得良好的结果。

例如。

a.button span { background-image: url(this.png; }
于 2011-07-06T14:12:45.337 回答
0

只想添加（因为我搜索了这个问题，这个问题首先出现）IE6和其他版本使PNG透明度非常难看。如果你有一个 alpha 透明（32 位）的 PNG 图像，并且想在一些复杂的背景上显示它，你永远不能简单地在 IE 中做到这一点。但是，只要将 PNG 图像（或 div）CSS 属性background-color设置为与 parents 相同，就可以在单一颜色背景上正确显示它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） 。

于 2010-10-07T09:01:38.887 回答