如何解决IE中的PNG:为部分透明的img切换不透明度?
| 我有一个部分透明的PNG图像文件。我需要切换它的不透明度。 目前,我正在使用以下CSS代码来允许不透明度:filter:alpha(opacity=50);
但是,IE无法处理PNG的透明部分。当我尝试通过添加以下CSS进行修复时:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\'../images/translucent_effect.png\',sizing Method=\'scale\');
好吧,它不起作用。我的问题是:人们找到这个问题的最佳解决方案是什么?我应该将PNG转换为GIF吗?还是有一个更优雅的解决方案?
谢谢。
解决方法
IE的
filter
风格简直糟透了。它的确允许浏览器执行一些本应超出其范围的技巧,但它是非标准的,并且存在一些主要问题。
我无法确定是否没有完整的CSS,但在我看来,您似乎已经被ѭ2最大的“奇怪”怪癖之一迷住了:
如果需要指定多个过滤器,则必须一起指定它们。如果您分别指定它们(如您在示例中所做的那样),则第二个filter
会覆盖第一个filter
,即使它们实际上执行的动作完全不同。实际上,这与CSS样式表的一般工作方式一致,但是由于filter
可以执行的操作范围,这是违反直觉的。
您可以用单个filter
样式指定多个过滤器,并以空格分隔。
请参阅此处以获取参考:http://msdn.microsoft.com/zh-cn/library/ms532847%28v=vs.85%29.aspx
如果您希望样式表上的不同类名触发不同的效果,则这种方法的问题很明显-因为无法将来自不同来源的过滤器组合到同一元素中。
可能引起您注意的另一个大陷阱是,由于冒号,使用progid:
语法编写的过滤器实际上是无效的CSS,它的严重程度足以导致某些非IE浏览器在整个样式表上阻塞。对于IE6和IE7,对于IE6和IE7,或者对于IE8,使用速写语法(如第一个示例中的alpha()
过滤器),可以使用较长的语法将整个内容括在引号中来防止这种情况。
这是一个例子:
-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'../images/translucent_effect.png\',sizing Method=\'scale\');\"
希望能有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。