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

全栈程序员-站长 • 2022年5月15日下午7:00 • 未分类 • 阅读 56

解决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)

全栈程序员-站长

0 0

SQL中的聚合函数介绍

SQL中的聚合函数介绍什么是聚合函数（aggregatefunction）？聚合函数对一组值执行计算并返回单一的值。聚合函数有什么特点？除了COUNT以外，聚合函数忽略空值。聚合函数经常与SELECT语句的GROUPBY子句一同使用。所有聚合函数都具有确定性。任何时候用一组给定的输入值调用它们时，都返回相同的值。标量函数：只能对单个的数字或值进行计算。主…

全栈程序员-站长
2022年6月21日
归并排序算法详细图解_归并排序算法详解

归并排序算法详细图解_归并排序算法详解一、什么是归并排序1.概念归并排序（Mergesort）是建立在归并操作上的一种有效的排序算法，归并排序对序列的元素进行逐层折半分组，然后从最小分组开始比较排序，合并成一个大的分组，逐层进行，最终所有的元素都是有序的2.算法原理这是一个无序数列：4、5、8、1、7、2、6、3，我们要将它按从小到大排序。按照归并排序的思想，我们要把序列逐层进行拆分序列逐层拆分如下然后从下往上逐层合并，首先对第一层序列1（只包含元素4）和序列2（只包含元素5）进行合并创建一个大序列，序列长度为两个小序列长度

全栈程序员-站长
2022年10月20日
docker

docker映射端口命令_docker底层原理

docker映射端口命令_docker底层原理一、容器为什么要做端口映射查看宿主机的IP信息docker容器的IP信息下面面这一段这就是docker的网络，我们可以看到它的网段是172.17.0.0段的。3:docker0:<BROADCAST,MULTICAST,UP,LOWER_UP>mtu1500qdiscnoqueuestateUPgroupdefaultlink/ether02:42:b6:4b:f0:16brdff:ff:ff:ff:ff:ffinet172.17.0

全栈程序员-站长
2022年10月11日
图遍历算法的应用

图遍历算法的应用1.判断图的连通性图的遍历算法可以用来判断图的连通性。如果一个无向图是联通的，如果无向图是联通的，则从任一节点出发，仅需一次遍历就可以访问图中的所有节点。如果无向图是非联通的，则从某一节点出发，一次遍历仅能访问到该顶点所在联通分量的所有顶点，而对于图中其他联通分量的顶点，则无法通过这次遍历访问。对于有向图来说，若从初始点到图中的每个顶点都有路径，则能够访问到图中的所有顶点，否则不能访问到所有顶…

全栈程序员-站长
2022年5月4日
java并发使用ScheduledExecutor的温室控制器–thinking in java 21.7.5

java并发使用ScheduledExecutor的温室控制器–thinking in java 21.7.5

全栈程序员-站长
2022年2月3日
移动端，PC端，微信等常用平台和浏览器判断

移动端，PC端，微信等常用平台和浏览器判断移动端，PC端，微信等常用平台和浏览器判断

全栈程序员-站长
2022年4月24日

发表回复

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