首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >IE8中的PNG透明度问题

IE8中的PNG透明度问题
EN

Stack Overflow用户
提问于 2009-08-09 13:49:32
回答 5查看 106.9K关注 0票数 76

我在一个透明的PNG图像上遇到了问题,它在图像的非透明部分的边缘显示出黑色的抖动像素伪影。它只在Internet Explorer中执行此操作,并且仅在使用它的Javascript文件中执行此操作。

这就是我要说的。http://70.86.157.71/test/test3.htm (链接现在死了) ...notice的女孩在右下角。她在IE8中有一些工件(我没有在以前的IE版本中测试过它,但我假设它可能会做同样的事情)。它在Firefox和Chrome上运行完美。图像是从Javascript文件加载的,以产生鼠标悬停效果。

如果您完全加载图像本身,它可以很好地工作。这是图像..。http://70.86.157.71/test/consultant2.png

如何解决这个问题?

这张图片是用Photoshop CS3制作的。

我读过一些关于移除Gama的文章,但这显然是在以前的Photoshop版本中出现的,当我在TweakPNG中加载它时,它没有Gama。

EN

回答 5

Stack Overflow用户

发布于 2011-02-09 05:19:26

我将此代码放入一个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上应用函数即可。

票数 9
EN

Stack Overflow用户

发布于 2012-05-18 04:47:41

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

修复方法是设置元素的背景色。

因此,如下所示:

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: ...;
票数 5
EN

Stack Overflow用户

发布于 2011-05-13 03:28:10

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忽略我之前声明的其他浏览器的实际背景图像。

谢谢,丹!

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1251416

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档