多个嵌套div上的Z索引和不透明度

Question

我正在尝试一个简单的设计，其中包含三个嵌套的div（Div 1内的Div 2内的Div 3），每个嵌套的div彼此重叠（Div 3上的Div 2上Div 1的内层）。 中间div（Div 2）具有一定程度的不透明度，因此最外侧的div（Div 1）在某种程度上可见。 但是，最顶层的div（即Div 3）应完全可见，并且Div 2的不透明度不应影响Div 3。

这是jsfiddle 。 子2的不透明度正受到子1的不透明度的影响，我不想发生这种情况。 我希望孩子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（请注意，我需要位置：两个孩子都是绝对的）：

    .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;
      }

Answer 1

这是不可能的，不透明会影响所有孩子。 采用

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;
}

看这里

Answer 2

打破嵌套div的树：无需更改HTML，但是将子div中现在的背景颜色和不透明度设置为其伪元素。

这样，您可以打破不透明度通道中的依赖关系

  .box { width: 200px; height: 200px; } .parent { background-color: green; } .child { left: 40px; top: 40px; z-index: 10; position: absolute; } .child:after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: blue; opacity: 0.35; } .child2 { background-color: green; left: 40px; top: 40px; z-index: 100; position: absolute; }

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

多个嵌套div上的Z索引和不透明度

问题描述

2 个解决方案

解决方案1
1 2016-02-09 20:55:59

解决方案2
1 2016-02-09 21:28:17

多个嵌套div上的Z索引和不透明度

问题描述

2 个解决方案

解决方案1 1 2016-02-09 20:55:59

解决方案2 1 2016-02-09 21:28:17

解决方案1
1 2016-02-09 20:55:59

解决方案2
1 2016-02-09 21:28:17