大家好,又见面了,我是你们的朋友全栈君。
上问题!!
在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下:
代码如下清重点关注opcaity
<!-- css样式 -->
<style>
.boxfather {
width: 500px;
height: 500px;
background-color: blue;
text-align: center;
padding: 100px;
box-sizing: border-box;
opacity: 0.7;
}
.boxson {
width: 300px;
height: 300px;
background-color: green;
padding: 100px;
box-sizing: border-box;
}
.boxgrandson {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<!-- html结构 -->
<div class="boxfather">
<div class="boxson">
<div class="boxgrandson">
</div>
</div>
</div>
可见我们只是对父级元素设置了透明度,子元素和孙子元素都没有设置但是效果却是【左未设置透明度,右设置为0.7】
然后我们去查手册看opacity属性是否存在继承性
这是w3school给的答案,链接:https://www.w3school.com.cn/cssref/pr_opacity.asp
这是某鸟教程给的答案,连接:https://www.runoob.com/cssref/css3-pr-opacity.html
那么问题来了,我们明明就没有给子孙元素设置透明度为啥就成这样了呢?
于是我们开始探索到底怎么回事,【质疑权威】是非常好的精神,但是一定要有根据的提出于是我们引入了jQuery辅助一探究竟
<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
var sonop = $(".boxson").css('opacity')
var grandsonop = $(".boxgrandson").css('opacity')
console.log(sonop,grandsonop);
})
</script>
有了jQuery老大哥的帮助我们看一下结果:
(翻阅好多资料后。。。。。)
1,发现了一个这样的教程
决定上手试一下试的过程中我又试着搜了一下这个
没想到呀结果令我喜出望外
在解决方法中这个解决方案令我激动不已,先上链接 https://blog.csdn.net/weixin_29947843/article/details/107752117
在经过多轮的代码实验后我发现opacity属性在实现的原理上极度类似于PS中的蒙版概念
大概的实现原理图如下:
在原有的div盒子的区域上方添加了蒙版实现了opacity透明的效果而且这层所谓的“蒙版”的层级要高于div的默认层级
于是有了如下的css新增:
.boxfather:position: relative; z-index: 1;
.boxson : position: absolute; z-index: 50;
.boxgrandson : position: absolute; z-index: 100;
控制台输出结果:
目测是属性加上了但是:
依旧是这个鬼样子!!!!难道是药效不够?于是
问题还在尝试继续
于是有了如下改动我就直接上完整代码啦,要下班咯😀
<style>
.boxfather {
width: 500px;
height: 500px;
background-color: blue;
text-align: center;
padding: 100px;
box-sizing: border-box;
opacity: 0.5;
position: absolute;
z-index: 1;
}
.boxson {
width: 300px;
height: 300px;
background-color: green;
padding: 100px;
box-sizing: border-box;
position: absolute;
top: 20%;
left: 7%;
z-index: 500;
}
.boxgrandson {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: 1000;
}
</style>
<body>
<div class="boxfather">
</div>
<div class="boxson">
<div class="boxgrandson">
</div>
</div>
</body>
神奇的事情发生了!!!这个时候生效了!!!
但是我又有了新的质疑到底和层级有没有关系于是我们刻意的提高.boxfather的层级不可思议的事情又发生了
现在的层级关系是
效果:
哇哇哇。。。。。。。。。。。要疯(不行我还不能疯)
很简单的原理嘛,差点轻易的疯掉了🤭
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141134.html原文链接:https://javaforall.cn