JavaScript opacity Internet Explorer中的消除锯齿错误

时间:2010-10-07 19:35:19

标签: javascript jquery internet-explorer animation opacity

我在我制作的javascript动画上遇到了一个关于Internet Explorer的烦人的错误。 我有一个城市天际线的灰度图像,它的不透明度变为0,显示出全彩色的天际线。

它在所有其他浏览器中看起来很棒,但IE显示了工件。一位朋友告诉我这是因为在IE中使用javascript动画不透明的一些奇怪的错误。与抗锯齿和假定的黑色背景有关?我真的不知道。

2 个答案:

答案 0 :(得分:6)

alpha过滤器(由jQuery用作不支持CSS opacity的IE上的后备)不能与具有Alpha通道的图像共存,例如变量透明度巴布亚新几内亚。它会强制形状边缘的部分透明黑色像素完全不透明,从而导致伪影。

将alpha过滤器放在包含半透明图像的<div>上,可以获得更好的效果。 (如果你需要IE6支持,你还需要对图像本身进行PNG修复。)这仍然不太正确,因为每个像素的不透明度被视为图像不透明度和滤镜不透明度的最小值,而不是两个成倍增加。但它通常看起来还不错,并且不会引入你在这里过于透明的问题。

答案 1 :(得分:1)

最简单的修复 - 将图像更改为GIF。由于您的城市图像没有任何渐变,因此png格式的alpha通道支持的优势并不是您所需要的。这应该一直回到ie6。