gpt4 book ai didi

javascript - 几个嵌套 div 上的 Z-index 和不透明度

转载 作者:太空宇宙 更新时间:2023-11-04 02:37:57 25 4
gpt4 key购买 nike

我正在尝试使用三个嵌套的 div(Div 3 在 Div 2 内在 Div 1 内)进行简单设计,每个 div 彼此重叠(Div 3 重叠在 Div 2 上重叠在 Div 1 上)。中间的 div (Div 2) 具有一定程度的不透明度,因此最外层的 div (Div 1) 在某种程度上是可见的。但是,最顶层的 div(即 Div 3)应该完全可见,并且 Div 2 的不透明度不应影响 Div 3。

这是 jsfiddle . child 2 的不透明度受到 child 1 的不透明度的影响,这是我不想发生的。我希望 Child 2 的不透明度为 1.0。我怎样才能做到这一点?请在 Chrome 和 Firefox 上测试。

html部分如下:

    <html>
<head>
</head>
<body>
<div class="parent box">
Parent
<div class="child box">
Child
<div class="child2 box">
Another Child
</div>
</div>
</div>
</body>
</html>

以下是 css(注意我需要两个 child 的 position: absolute):

    .box{
width:200px;
height:200px;
}

.parent {
background-color:green;
}

.child {
background-color:blue;
left:40px;
top:40px;
z-index:10;
position:absolute;
opacity:0.35;
}

.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}

最佳答案

那是不可能的,不透明度会影响所有 child 。使用

rgba(r,g,b,a) 

代替元素。

示例:

.parent {
background-color: rgba(28,179,239, 0.35)
}

.child {
left:40px;
top:40px;
z-index:10;
position:absolute;
background-color: rgba(28,179,239, 0.5)
}

.child2 {
background-color:green;
left:40px;
top:40px;
z-index:100;
position:absolute;
}

See here

关于javascript - 几个嵌套 div 上的 Z-index 和不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35301980/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com