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应该是完全可见的，而Div 2的不透明度不应该影响Div 3.

这是position。儿童2的不透明度受到儿童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（注意我需要的位置：两个孩子都是绝对的）：

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

See here

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上的Z-index和Opacity

2 个答案: