前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于opacity属性的探究

关于opacity属性的探究

作者头像
全栈程序员站长
发布2022-09-01 16:48:59
3360
发布2022-09-01 16:48:59
举报

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

关于opacity属性的探究


上问题!!

在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下:

代码如下清重点关注opcaity

代码语言:javascript
复制
    <!-- 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属性的探究
关于opacity属性的探究
关于opacity属性的探究
关于opacity属性的探究

然后我们去查手册看opacity属性是否存在继承性

关于opacity属性的探究
关于opacity属性的探究

这是w3school给的答案,链接:https://www.w3school.com.cn/cssref/pr_opacity.asp

关于opacity属性的探究
关于opacity属性的探究

这是某鸟教程给的答案,连接:https://www.runoob.com/cssref/css3-pr-opacity.html

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

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


于是我们开始探索到底怎么回事,【质疑权威】是非常好的精神,但是一定要有根据的提出于是我们引入了jQuery辅助一探究竟

代码语言:javascript
复制
  <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属性的探究

????🤦‍不该这样呀!!!【质疑无效!!!】



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


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

(翻阅好多资料后。。。。。)

关于opacity属性的探究
关于opacity属性的探究

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

关于opacity属性的探究
关于opacity属性的探究

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

关于opacity属性的探究
关于opacity属性的探究

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

关于opacity属性的探究
关于opacity属性的探究

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

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



正文开始:层级与蒙版

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

大概的实现原理图如下:

关于opacity属性的探究
关于opacity属性的探究

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

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

于是有了如下的css新增:

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

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

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

控制台输出结果:

关于opacity属性的探究
关于opacity属性的探究

目测是属性加上了但是:

关于opacity属性的探究
关于opacity属性的探究

依旧是这个鬼样子!!!!难道是药效不够?于是

关于opacity属性的探究
关于opacity属性的探究

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

问题还在尝试继续

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

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

css部分:

代码语言:javascript
复制
<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部分:

代码语言:javascript
复制
<body>
    <div class="boxfather">
    </div>
    <div class="boxson">
        <div class="boxgrandson">
        </div>
    </div>
</body>

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

关于opacity属性的探究
关于opacity属性的探究

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

现在的层级关系是

关于opacity属性的探究
关于opacity属性的探究

效果:

关于opacity属性的探究
关于opacity属性的探究

哇哇哇。。。。。。。。。。。要疯(不行我还不能疯)

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

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

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

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



好了总结一下:

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

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 关于opacity属性的探究
    • 提出质疑:w3school和菜鸟教程写错了??
      • ????🤦‍不该这样呀!!!【质疑无效!!!】
        • 再提问题:在知道opacity属性不具有继承性的基础下我们的代码结果表现了“继承”的“性状”?(难道。。。这儿子不是亲生的??!🤦‍♂️)
          • 解决思路:代码没问题,文档没问题,探究一下opacity实现机制
          • 在这位博主的文章中有一个层级的概念使我找到了打开世界的大门!!!
            • 正文开始:层级与蒙版
              • 尝试性解决1:提高不要透明度的盒子层级
              • 尝试1 —结论:失败,opacity属性不受z-index影响他是最贴近我们脸上的一层东西
              • 尝试性解决2:把opacity属性放到同级元素实现
              • css部分:
              • HTML部分:
            • 分析:因为最上层是蓝色的!!不设置透明的时候应该看不到下层的!!
              • 正因为加上了opacity属性所以才会使另外两个按起来变了色!!
                • 也就是说我们黄色的盒子和绿色的盒子是在0.5透明度的蓝色的滤层下展示了现在这个奇奇怪怪的颜色
                  • 1、透明度opacity属性确实没有继承性!!!
                  • 2、表现出继承“性状”的原因是opacity属性生效原理类似蒙版!!
                  • 3、子元素或子盒子无论层级多高都无法突破父级元素透明度的那层阴影!!!
                  • 4、可以通过改变盒子的包含关系解决这个问题!!
              • 好了总结一下:
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档