Question

我有一个部分透明的PNG图像文件。我需要切换它的不透明度。

目前我使用以下CSS代码来允许不透明度：

filter:alpha(opacity=50);

但是，IE无法处理PNG的透明部分。当我尝试通过添加以下CSS来修复它时：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

嗯，它不起作用。我的问题是：人们发现这个问题的最佳解决方案是什么？我应该将PNG转换为GIF吗？还是有更优雅的解决方案？

感谢。

Answer 1

IE的filter风格是一个可怕的混乱。它确实允许浏览器做一些本来不在其范围内的技巧，但它是非标准的，并且有一些重大问题。

如果没有看到完整的CSS，我无法确定，但在我看来，好像你被filter最大的'陷阱'怪癖之一所困扰：

如果需要指定多个过滤器，则必须同时指定它们。如果您单独指定它们，就像您在示例中所做的那样，第二个filter会覆盖第一个，即使它们实际上执行完全不同的操作。这实际上与CSS样式表的工作方式一致，但由于filter能够做的范围，这是违反直觉的。

您可以使用单个filter样式指定多个过滤器，以空格分隔。

请参阅此处以获取参考：http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

如果你想在样式表上使用不同类名触发不同的效果，这种方法的问题是显而易见的 - 因为没有办法将不同来源的过滤器组合到同一个元素中。

可能会让你感到困惑的另一个重要问题是，使用progid:语法编写的过滤器由于冒号而实际上是无效的CSS，并且它足以导致一些非IE浏览器阻塞整个样式表。这可以通过使用简写语法（根据您的第一个示例中的alpha()过滤器），IE6和IE7，或使用-ms-filter替代的IE8，使用更长的语法来封闭引用中的全部内容。

以下是一个例子：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');"

希望有所帮助。

IE中的PNG：为部分透明的img切换不透明度？

1 个答案: