CSS中 opacity的设定危害了index(层数)的更改的难

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

在应用 opacity 特性来完成网页页面总体全透明的情况下,发现了1个难题。假如两个层产生了重合,应用了 opacity 特性而且特性值小于1的层,会遮盖掉后边的层。因而动手能力做了个试验,来认证 opacity 的层级。

网页页面中的堆叠规律性是这样的:假如两个层都沒有界定 position 特性为 absolute 或 relative 特性,哪一个层的HTML编码放在后边,哪一个层就显示信息在上面。假如特定了 position 特性,而且设定了 z-index 特性,谁的值大,谁就在上面。

Opacity 特性引起的堆叠难题

而针对沒有激活 z-index 的一般层来讲,假如那个层应用了特性值小于1的 opacity 特性,哪一个层就会显示信息在上面。大家做1个Demo。编码以下:

<html>
<head>
        <title >带有 opacity 的堆叠难题</title>
        <style>
        html{padding:40px;}
        .dd{width:100px;height:100px;}
        #a{background:red;}
        #b{background:blue;margin-left:20px;margin-top:⑻0px;}
        #c{background:green;margin-left:40px;margin-top:⑻0px;}
        </style>
</head>
<body>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
</body>
</html>

储存为 html 文档开启以后,能够看到一切正常的顺序

一切正常的堆叠

这时候候,大家为 #a 再加特性 opacity:0.9 奇异的事儿产生了,它遮盖了此外两个层:

再加小于1的 opacity 以后的堆叠

仅有当为另外一个层(比如:#c)也设定1个小于1的opacity值(比如:0.8)以后,后边的 #c 才可以安裝一切正常的标准遮盖在 #a 上面。

另外为另外一个层取值 opacity

这样,提升了小于1的 opacity 特性的层,上升了1个层级。至于里边的科学研究基本原理,我沒有想搞清楚,也许也将会是1个小BUG。可是有时这类状况是大家不期待产生的。

根据界定 position 的特性来处理难题

那末怎样来处理这个难题呢?前面也说过了,一切正常的状况下,特定了 position 而且特定了 z-index 值的层,有着比一般层更高的层级,那末特定 opacity 的层和特定了 position 的层相比呢?大家对 #b 再加 position:relative 看看。这时候候的款式编码以下:

#a{background:red;opacity:0.9;}
#b{background:blue;margin-left:20px;margin-top:⑻0px;position:relative;}
#c{background:green;margin-left:40px;margin-top:⑻0px;opacity:0.8;}

储存更新后,看到实际效果是这样的:

对层应用了 position 特性以后的堆叠实际效果

也便是说,对层应用 position 特性的 relative 以后,可使其层级和 opacity 同样,这样以后,依照一切正常的排列开展堆叠显示信息(在后边的试验中,我对 absolute 特性值也做了检测,結果和 relative 特性值主要表现的同样)。当大家撤销了 #c 的 opacity 特性以后,大家能够看到,#c 被排在了最下面。

对最底层撤销 opacity 特性以后的实际效果

都还没完,以前只是对 #b 激活了 position:relative 特性,都还没应用 z-index。大家对 #b 开展了 z-index 的设定(比如:100),很明显的,#b 变成了最高层。

对正中间层设定 z-index 的实际效果

堆叠难题总结

应用了 position 特性值为 absolute、relative 的层,可能比一般层更高层级。应用了小于1的 opacity 特性的层,也比一般层更高层级而且和特定 position 的层同层,可是不适用 z-index 特性,因此特定 position 的层,可使用 z-index 特性,来遮盖带有小于1的 opacity 特性的层。”

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助~假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用!