在IE中镜像/翻转图像并保持透明度

Question

我一直在尝试使用以下CSS翻转背景图片：

.flipHorizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

在拥有透明背景（alpha通道）的PNG图片中，所有透明和半透明像素在IE浏览器中都会变成完全黑色，但在其他浏览器中一切正常。

有人知道解决这个问题的方法吗？

也许微软实施了另一个过滤器（即“热修复”）来解决这种问题。我认为同样的错误也适用于旋转和其他转换滤镜与PNG一起使用时。

- wazz3r

---

所有版本的IE，甚至是新的IE9 beta - wazz3r

Answer 1

很抱歉，我知道已经迟了2年。

但是对于任何其他人来说，尝试在 CSS 中添加背景颜色应该会解决这个问题（或者至少可以修复淡入淡出时的相同掩码错误）。

- mig

---

非常有帮助。感谢晚了两年才发布！ - Brendan

非常棒的解决方案！谢谢。 - Dan Wuensch

Answer 2

使用旧的IE6 AlphaImageLoader hack，再加上另一个DXImageTransform来实现翻转。不幸的是，这种方法变得不太通用，因为您必须定义图像，但是您可以使用一些脚本动态设置样式。(查看此处的动态脚本示例--查找pngfix.js代码。)

.flipHorizontal {
   -moz-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myImage.png')
           progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

在IE8和FF3.6中测试成功。不确定是否需要-ms-filter，但我无法测试IE6或IE7，并且不确定是否需要该属性。

- D.N.

---

我使用FlipH来完成这个魔术，因为我必须使用JavaScript。如果IE用户想要摆脱黑暗，他们将不得不切换浏览器。通过强制一些用户停止使用IE，我可能会为所有Web开发人员提供帮助... 如果你愿意使用JavaScript来解决它，那么你的解决方案效果很好。 - wazz3r

如果其他人使用此代码，可能需要删除第二个过滤器末尾的引号 - (mirror=1)"; - 这给我带来了一些麻烦！ - Gais

代码中@Gais提到的尾随引号已被删除。 - Jpsy