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

解决opacity属性在低版本IE浏览器下失效的方法以前,一直都以为ie9以下的版本不支持opacity属性。所以就同时使用opacity和ie独特的filter蒙版。但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的opacity,这种情况下,同时使用opacity和filter就显的有点麻烦了。其实,只使用opacity+jquery就完全解决这个问题。用法如下:<scripttype…

大家好,又见面了,我是你们的朋友全栈君。

以前,一直都以为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.proxy.ustclug.org/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>

 

转载于:https://www.cnblogs.com/xyyt/p/3979265.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/146168.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux密码记录木马,注意 “QQ大盗”木马注入 QQ 进程记录QQ账号与密码[通俗易懂]

    linux密码记录木马,注意 “QQ大盗”木马注入 QQ 进程记录QQ账号与密码[通俗易懂]“QQ大盗”变种AC(Win32.PSWTroj.QQPass.ac)是一个盗取QQ账号和密码的木马病毒。“网游追击者”变种CD(Win32.Troj.LipGame.cd)是一个盗取多个网络游戏账号的木马病毒。一、“QQ大盗”变种AC(Win32.PSWTroj.QQPass.ac)威胁级别:★该病毒是一个盗号木马,它会潜伏在受感染的电脑系统里,监视并伺机注入到QQ进程里,创建信息勾子,记录用…

    2022年7月20日
    39
  • 关于DNS负载均衡技术

    关于DNS负载均衡技术在学习负载均衡技术的时候,我们肯定会学到dns负载均衡的相关内容,因为这个是负载均衡的一个代表应用。那么说到应用,到底是如何进行使用,改善网络问题的呢?那么本文就将为大家详细介绍一下其中的原理。为了建立一个高负载的Web站点,必须使用多服务器的分布式结构?上面提到的使用代理服务器和Web服务器相结合,或者两个Web服务器相互协作的方式也属于多服务器的结构,但在这些多服务器的结构中,每个服务器所

    2022年7月14日
    19
  • clion激活码 mac【在线注册码/序列号/破解码】

    clion激活码 mac【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    81
  • USB PD快充协议_pd快充协议文件

    USB PD快充协议_pd快充协议文件USBPD快充协议

    2025年7月12日
    2
  • Halcon—Realsense相机标定+手眼标定[通俗易懂]

    Halcon—Realsense相机标定+手眼标定[通俗易懂]使用软件:Halcon18.05(默认安装好任一版halcon)使用设备:IntelRealsense435+AUBO机械臂完成功能:相机标定、eye-in-hand手眼标定1.准备标定板如果没有标定板:1.窗口–打开算子窗口–gen_caltab设置XNum,YNum—圆点个数,X和Y方向圆点个数圆点直径=MarkDist×DiameterRatio间距为MarkDist…

    2022年6月7日
    211
  • 高手解决DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER

    高手解决DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER1、首先要先确定你加电启动的时候有没有认出你的硬盘。这点在bios里可查。如果开机「滴」的一声短声,证明开机自检没问题(排除硬件问题,但不包括硬盘没有识别)。此时按del键进入bios,看你的硬盘有没

    2022年7月4日
    24

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号