我在一个透明的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。
发布于 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上应用函数即可。
发布于 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: ...;
发布于 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忽略我之前声明的其他浏览器的实际背景图像。
谢谢,丹!
https://stackoverflow.com/questions/1251416
复制相似问题