IE CSS的“滤镜”破坏了Alpha透明度

Question

我正在尝试找出是否有一种奇怪的解决方案来解决这个奇怪的问题。

基本上，IE >= 7 完美支持 PNG 透明度，并且多年来通过“filter”属性中的奇怪设置支持了 CSS3 中的很多新功能。

然而，当你将一个滤镜应用于具有 PNG 背景的元素时，该背景的 alpha 透明度基本上会破坏（非常类似于 IE6）。

如果可能的话，我想使用其他浏览器给我的 CSS3 属性，并在 IE 中也获得它们，而不是在 JS 中实现它们（转换），或者根本不实现它们（旋转），但除非我找到半透明问题的解决方法，否则我无法做到这一点。

你们中有没有人发现过这个问题并找到了解决方法？

#.faded {
    filter:progid:DXImageTransform.Microsoft.Fade(duration=2)
}

当我添加这个代码时，所有元素(至少是我试过的所有元素)在IE中都会破坏PNG透明度。实际上，所有滤镜都会出现这种情况。

---

谢谢！
丹尼尔

- Daniel Magliola

---

实际上，IE7并不完美地支持它。它仍然存在许多剪切和绘图错误，即使没有过滤器也会出现这些错误。这就像他们匆忙添加了一个库来安抚网页设计师一样。 - BoltClock

丑陋无比，但在我的书中还算可以，在IE8中。（我没有IE7，但它在那里看起来也不会更好...） - Rudie

您的目标不仅是透明度，而是淡入淡出效果吗？使用 MS 滤镜？这很令人兴奋。就像BoltCock所说：有些东西在IE中根本无法工作。我建议您不要太在意：IE用户无法获得完整的体验。 - Rudie

@BoltClock：好的，我明白你的意思。也许不是完美的，但足够好用了。我从来没有遇到过问题，但我肯定没有仔细查看过。 - Daniel Magliola

MS滤镜通常是一个“非常好”的替代品。而且有很多！所以下次你想要模拟一个酷炫的CSS(3)效果时，可以查看数百个（！！）滤镜（或者谷歌）。我现在已经不再关心IE了。IE太差劲了，我甚至不想再解释了。IE用户根本不配拥有互联网。我们有责任告诉他们。 - Rudie

Answer 1

你尝试过CSS3 PIE或其他第三方解决方案吗？如果已经有现成的解决方案可用，就没必要重复造轮子了。

- Alok

---

如果在一个页面上大量使用PIE，它就会出现问题。那些htc文件非常低效且难以处理。 - Rudie

PIE似乎不支持过渡效果（这正是我试图通过淡入淡出实现的），也不支持旋转（虽然滤镜可以通过矩阵实现，但会破坏透明度）。如果您知道有任何支持这些功能的插件，我一定会尝试它们。我知道它们的效果可能很差，但比起一开始就没有这些功能要好得多。谢谢！ - Daniel Magliola

Answer 2

我能够尝试的最佳方法是：http://jsfiddle.net/xtT6b/

重点是将带有过滤器的块与带有背景的块分开，并将alphaImageLoader过滤器添加到带有背景的块中。

然而，在某些图像上，结果可能很好，但在其他图像上，会出现一些伪影，特别是在IE7上。

- kizu