900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 解决opacity属性在低版本IE浏览器下失效的方法

解决opacity属性在低版本IE浏览器下失效的方法

时间:2019-10-16 05:28:04

相关推荐

解决opacity属性在低版本IE浏览器下失效的方法

以前,一直都以为ie9以下的版本不支持opacity属性。所以就同时使用 opacity和ie独特的filter蒙版。但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的opacity,这种情况下,同时使用opacity和filter就显的有点麻烦了。

其实,只使用opacity+jquery就完全解决这个问题。

用法如下:

<script type="text/javascript">$(function () { $("#p1").css("opacity", 0.6); });</script>

由于博客里面不能写js代码,有兴趣的朋友们可以把下面示例代码直接拷贝到txt文件中,

然后把文件后缀名改为.html就好,然后直接运行这个文件就可以在浏览器中看效果了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "/TR/xhtml11/DTD/xhtml11.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><title>CSS opacity 属性示例</title> <style type="text/css" media="all">#p2{opacity:0.4;}p{width:200px;height:200px;background-color:green;float:left;}</style><script type="text/javascript">$(function () { $("#p1").css("opacity", 0.6); });</script></head><body><p id="p1">opacity:0.6;这个透明度通过jquery添加,不存在低版本IE浏览器不兼容的现象</p><p id="p2">opacity:0.4;这个透明度直接使用样式设置,低版本的IE浏览器会没有透明效果</p></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。