如何解决影响绝对定位元素的不透明度 这是 HTML 代码:
我有两个容器(container1 和 container2),在 container1 中有一个子元素。这个子元素是绝对定位的,一半元素与 container2 重叠。我明白,如果我向 container1 添加 opacity,它的所有子元素都是属性固有的,但是如果我将 opacity 添加到 container2,它最终会影响 container1 的子元素,即使 container2 不是它的父元素。解释会很有帮助。
这是 HTML 代码:
<body>
<div id="container1" style='height: 250px; background-color: red'>
<div id="child" style="height: 290px; width: 200px; background-color: green; position: absolute; top: 100px; left: 30%"></div>
</div>
<div id="container2" style="height: 250px; background-color: purple; font-size: 130px; opacity: 0.5">Some really big text</div>
</body>
这是正在发生的事情的屏幕截图:https://i.stack.imgur.com/A84Li.png
解决方法
我认为这是由于紫色元素后面的绿色元素。本质上,紫色 <div>
元素在绿色子元素 <div>
上投射紫色色调。当 container2
的不透明度设置为除 opacity:1
以外的任何值时,它似乎导致 child
被 container2
覆盖。在这种情况下,设置 z-index
将解决该问题。其中 z-index
将控制垂直于 xy 平面的层次结构。按下面的运行代码片段按钮查看结果:
#container1 {
height: 250px;
background-color: red
}
#child {
height: 290px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 30%;
z-index: 1;
}
#container2 {
height: 250px;
background-color: purple;
font-size: 130px;
opacity: 0.2;
}
<body>
<div id="container1">
<div id="child"></div>
</div>
<div id="container2"></div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。