关于opacity属性的探究

关于opacity属性的探究关于opacity属性的探究上问题!!在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下:代码如下清重点关注opcaity<!–css样式–><style>.boxfather{width:500px;height:500px;background-color:blue;text-align:cen

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

关于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属性的探究  关于opacity属性的探究

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

关于opacity属性的探究

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

关于opacity属性的探究

这是某鸟教程给的答案,连接: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属性不具有继承性的基础下我们的代码结果表现了“继承”的“性状”?(难道。。。这儿子不是亲生的??!?‍♂️)

 


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

(翻阅好多资料后。。。。。)关于opacity属性的探究

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

  关于opacity属性的探究

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

关于opacity属性的探究

没想到呀结果令我喜出望外   关于opacity属性的探究

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

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



正文开始:层级与蒙版

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

大概的实现原理图如下:

关于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属性的探究

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

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

关于opacity属性的探究

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

现在的层级关系是关于opacity属性的探究

效果:关于opacity属性的探究

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

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

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

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

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



好了总结一下:

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

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

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

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

 

 

 

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pyecharm激活码[在线序列号]

    pyecharm激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 二传感器尺寸「建议收藏」

    二传感器尺寸「建议收藏」说到传感器的尺寸,其实是说感光器件的面积大小,这里就包括了CCD和CMOS。感光器件的面积越大,CCD/CMOS面积越大,捕捉的光子越多,感光性能越好,信噪比越高。下面是家用小DC图像传感器尺寸换算为公制的大小(单位为毫米):2/3英寸的画幅面积为(8.8×6.6mm)1/1.8英寸的画幅面积为(7.178×5.319mm)1/2英寸的画幅面积为(6.4×4.8mm)1/2.7英寸的画幅面…

  • Android.mk的用法和基础 && m、mm、mmm编译命令「建议收藏」

    Android.mk的用法和基础 && m、mm、mmm编译命令「建议收藏」一个Android.mkfile用来向编译系统描述你的源代码。具体来说:该文件是GNUMakefile的一小部分,会被编译系统解析一次或多次。你可以在每一个Android.mkfile中定义一个或多个模块,你也可以在几个模块中使用同一个源代码文件。选项参考以下文件:build/core/config.mk,默认的值在以下文件中定义:build/core/base_rules.mk。编译系统为

  • 洗牌算法思路_随机洗牌算法

    洗牌算法思路_随机洗牌算法1.背景    笔试时,遇到一个算法题:差不多是在n个不同的数中随机取出不重复的m个数。洗牌算法是将原来的数组进行打散,使原数组的某个数在打散后的数组中的每个位置上等概率的出现,刚好可以解决该问题。2.洗牌算法    由抽牌、换牌和插牌衍生出三种洗牌算法,其中抽牌和换牌分别对应Fisher-YatesShuffle和Knuth-DurstenfeldShhuffle算法。 …

  • 页面刷新之reload()和refresh()的区别

    页面刷新之reload()和refresh()的区别window.reload()重新加载当前需要的所有内容,也就包括页面和后台的代码,此过程中实际上是从后台重新进行操作;window.refresh()是更新,保存以前的缓存文件內容,再次载入网

  • spring使用aspectj_你可知晓

    spring使用aspectj_你可知晓【版权申明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)http://blog.csdn.net/javazejian/article/details/54629058出自【zejian的博客】关联文章:关于SpringIOC(DI-依赖注入)你需要知道的一切关于SpringAOP(AspectJ)你该知晓的一切本篇是年后第一篇博文,由于博主用了不少

发表回复

您的电子邮箱地址不会被公开。

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