IE8中的PNG透明性问题

76

我在透明PNG图像上遇到问题，该透明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。

javascript  internet-explorer  internet-explorer-8  png  iepngfix 
— 用户名
source
9
毫无疑问，几乎是由于您将css不透明度（通过ie的滤镜系统）应用到png上而引起的，这似乎是引起问题的原因。
— meandmycode
您对将其更改为可以在IE中使用有什么建议？
— user138777
1
正确。不要使用不透明滤镜（或其他任何与此相关的滤镜），因为它会引入伪影。
— EricLaw
我正在使用jQuery在幻灯片中进行淡入淡出-在那种情况下，它必须进行不透明性淡入淡出..现在所有这些都以黑色边缘显示。有什么办法吗？
— jeffkee 2010年
您可以接受答案，以便我锁定吗？这个问题已经有9个被删除的答案。它吸引了很多“ mee tooo！” 和“谢谢！” 答案。

Answers:

106

固定！

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

然后我想起了我遇到的一个rgba到即滤波器转换器。（感谢Michael Bester）。所以我想知道如果我给我的问题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和8中打个招呼Alpha通道。淡入和淡出png动画，或在屏幕上设置动画效果-一切都很好。

— 丹·泰洛
source
我遇到了同样的问题，但就我而言，白色背景足以解决该问题。感谢建议
— Quamis 2010年
将其与下面的：hover上的AlphaImageLoader hack结合起来对我来说是个窍门。
— nickb
谢谢-这对我有用，但是我需要将背景添加到另一个元素中，作为已逐渐消失的原始元素的子元素..在下面添加了详细信息。
— codeinthehole 2011年
4
请注意，这似乎只是部分修复-资源管理器仍将透明PNG与黑色预乘。这意味着如果您有一个不透明度为50％的白色区域（在PNG中），然后对该元素应用了任何类型的不透明度（通过CSS），您将看到的实际上是灰色（50％的白色x 100％黑色），无论您使用CSS指定的不透明度级别。仍在寻找一种真正的解决方案，但还没有找到。
— Tom Auger
3
嗨！我可能知道为什么它对某些人无效。就我而言，我正在用jQuery动画不透明度。但猜猜怎么了！您一次只能设置一个过滤器声明（即使您可以在该“过滤器：”声明中放置多个过滤器）。因此，当jQuery对透明度进行动画处理时，它将设置一个过滤器，覆盖其他过滤器。解决方案：将图像包装在div中；将alphaImageLoader或渐变滤镜应用于图像，并对div的不透明度进行动画处理。瞧！
— 迭戈
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上应用该功能即可。

— 迈克·卡瓦列雷（Mike Cavaliere）
source
7

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

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

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

演示

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

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

— 新鲜眼球
source
5

对于具有透明性的PNG发生了同样的事情，该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: ...;
— 乔希·穆奇（Josh Mouch）
source
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忽略了我先前为其他浏览器声明的实际背景图像的声明。

谢谢丹！

— 安德鲁
source
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 */
— 凯文·弗林
source
2

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

我在IE8中发现的另一个问题是，如果将PNG放置在DIV中，且CSS宽度或高度尺寸小于PNG，则重新触发黑色边缘概率。

更正CSS的宽度和高度或完全删除它们。

— 泽尼普
source
这应该是对答案的评论，而不是自己的答案，但这对我有所帮助！
— 马克·福克斯
2

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

尝试

.ie .whateverDivWrappingTheImage img {
背景：#ffaabb; / *这应该是实际上与您的设计匹配的背景色* /
过滤器：chroma（#ffaabb）; / *，这应该与您在background-color中放置的任何值匹配* /
}

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

— Macomatic
source
0

只是想添加（因为我用谷歌搜索了这个问题，并且首先出现了这个问题）IE6和其他版本使PNG透明性非常难看。如果您具有Alpha透明（32位）的PNG图像，并希望在某些复杂的背景上显示它，则永远无法在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）可以在此处找到。

— 奇皮
source
0

我的情况：

  • 我的背景图片具有设置为锚点链接的24位alpha png。
  • 使用Jquery在悬停时逐渐淡出了锚点。

例如。

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

我发现应用Dan Tello提供的标记无效。

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

例如。

a.button span { background-image: url(this.png; }
— 漏洞编码
source
跨度不是块级元素，除非您设置display：block和height / width，否则它将如何工作？
— 布伦登
@布伦登; 如果我没记错的话，我会使用“ display：block”。如果锚点环绕div，则标记将无法通过验证-因此使用span标签的原因。
— codeinthehole 2012年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.