Internet Explorer中的JavaScript不透明度反走样错误

Question

在我制作的javascript动画中，我遇到了一个恼人的bug。我有一张城市天际线的灰度图像，它将不透明度褪色为0，显示出全彩色的天际线。

它在所有其他浏览器中看起来都很棒，但IE揭示了一些瑕疵。一位朋友告诉我，这是因为IE中的javascript动画不透明的一些奇怪的bug。与抗锯齿和假定的黑色背景有关吗？我真的不知道。

Answer 1

最简单的修复-将图像更改为gif。因为你的城市图像没有任何渐变，所以png格式的alpha通道支持的优势并不是你真正需要的。这应该可以一直追溯到ie6。

Answer 2

alpha滤镜(由jQuery用作不支持CSS的IE上的后备)不能与具有alpha通道的图像共存，就像opacity上的变量透明度一样。它会强制形状边缘的部分透明黑色像素变得完全不透明，从而产生瑕疵。

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