关于opacity属性的探究

最新推荐文章于 2024-06-19 20:49:09 发布

jacob477

最新推荐文章于 2024-06-19 20:49:09 发布

阅读量1.3k

点赞数 7

文章标签： html css3

本文链接：https://blog.csdn.net/baidu_39068138/article/details/109163308

版权

关于opacity属性的探究

上问题！！

在前一段时间我朋友和我讨论到了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

那么问题来了，我们明明就没有给子孙元素设置透明度为啥就成这样了呢？

提出质疑:w3school和菜鸟教程写错了？？

于是我们开始探索到底怎么回事，【质疑权威】是非常好的精神，但是一定要有根据的提出于是我们引入了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老大哥的帮助我们看一下结果：

？？？？🤦‍不该这样呀！！！【质疑无效！！！】

再提问题：在知道opacity属性不具有继承性的基础下我们的代码结果表现了“继承”的“性状”？（难道。。。这儿子不是亲生的？？！🤦‍♂️）

解决思路：代码没问题，文档没问题，探究一下opacity实现机制

（翻阅好多资料后。。。。。）

1，发现了一个这样的教程

决定上手试一下试的过程中我又试着搜了一下这个

没想到呀结果令我喜出望外

在解决方法中这个解决方案令我激动不已，先上链接 https://blog.csdn.net/weixin_29947843/article/details/107752117

在这位博主的文章中有一个层级的概念使我找到了打开世界的大门！！！

正文开始：层级与蒙版

在经过多轮的代码实验后我发现opacity属性在实现的原理上极度类似于PS中的蒙版概念

大概的实现原理图如下：

在原有的div盒子的区域上方添加了蒙版实现了opacity透明的效果而且这层所谓的“蒙版”的层级要高于div的默认层级

尝试性解决1：提高不要透明度的盒子层级

于是有了如下的css新增：

.boxfather：position: relative; z-index: 1;

.boxson : position: absolute; z-index: 50;

.boxgrandson : position: absolute; z-index: 100;

控制台输出结果：

目测是属性加上了但是：

依旧是这个鬼样子！！！！难道是药效不够？于是

尝试1 ---结论：失败，opacity属性不受z-index影响他是最贴近我们脸上的一层东西

问题还在尝试继续

尝试性解决2：把opacity属性放到同级元素实现

于是有了如下改动我就直接上完整代码啦，要下班咯😀

css部分：

<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>

HTML部分：

<body>
    <div class="boxfather">
    </div>
    <div class="boxson">
        <div class="boxgrandson">
        </div>
    </div>
</body>

神奇的事情发生了！！！这个时候生效了！！！

但是我又有了新的质疑到底和层级有没有关系于是我们刻意的提高.boxfather的层级不可思议的事情又发生了

现在的层级关系是

效果：

哇哇哇。。。。。。。。。。。要疯（不行我还不能疯）

分析：因为最上层是蓝色的！！不设置透明的时候应该看不到下层的！！

正因为加上了opacity属性所以才会使另外两个按起来变了色！！

也就是说我们黄色的盒子和绿色的盒子是在0.5透明度的蓝色的滤层下展示了现在这个奇奇怪怪的颜色

很简单的原理嘛，差点轻易的疯掉了🤭

好了总结一下：

1、透明度opacity属性确实没有继承性！！！

2、表现出继承“性状”的原因是opacity属性生效原理类似蒙版！！

3、子元素或子盒子无论层级多高都无法突破父级元素透明度的那层阴影！！！

4、可以通过改变盒子的包含关系解决这个问题！！

jacob477

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫