zoukankan      html  css  js  c++  java
  • 解决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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="http://ajax.googleapis.com/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>
  • 相关阅读:
    4 linux上运行crm&uwsgi
    Vue 目录
    vue -(滚动播放-全屏展示)
    Chrome 调试技巧
    Vue 遇到的坑
    9 matplotlib
    Maven
    Dev-C++黑暗主体和代码高亮配置
    Git操作:一次push把代码提交到两个仓库
    windows server 2012 r2 快速启动 部署remoteapp 显示服务器有挂起的重启,怎么解决?
  • 原文地址:https://www.cnblogs.com/xyyt/p/3979265.html
Copyright © 2011-2022 走看看