Question

我一直在尝试用这个css翻转背景图片：

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

当你的PNG具有透明背景（alpha通道）时，除IE之外的所有浏览器都可以正常工作。所有透明和半透明像素都完全变黑。

任何人都知道解决方法吗？

也许还有另一个过滤器（读＆＃34;修补程序＆＃34;），MS实现了这个过滤器来解决这类问题。我认为同样的错误也适用于旋转和其他转换滤镜以及PNG。

Answer 1

所以，我意识到这已经太迟了2年。抱歉。：）

但是对于其他人来到这里，尝试在css上加上背景颜色，这应该让它快乐（或者，至少，当你淡入淡出它时，它会解决同样的问题，我认为这是全部相同的掩蔽错误。）

Answer 2

使用旧的IE6 AlphaImageLoader黑客获取您要查找的内容，以及另一个DXImageTransform进行翻转。不幸的是，由于您必须定义图像，因此它变得不那么通用，但您可以使用某些脚本动态设置样式。（有关动态脚本的示例，请参阅here - 查找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，并且不确定它是否需要该属性。

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

2 个答案: