div孩子的不透明度

Question

我有一个不透明度为0.4的div。如何让他的孩子不透明1？因为默认情况下它会从父母那里获取不透明度。

示例：

HTML：

<div class="container">
  <div class="opacity">
    <h2>TEST</h2>
  </div>
</div>

和css：

.container{
  height:200px;
  background:yellow;
}

.opacity{
  opacity: 0.3;
  background:black;
  height:100%;
  width:40%
}


.opacity h2{
  color:brown;
  padding-left:15px;
  padding-top:15px;
  opacity:1;
}

JsBin： JS Bin

如何使TEST完全可见？

Answer 1

你不能。

但试试这个：

.opacity {
    background-color: rgba(0,0,0,0.3);
}

Answer 2

我会这样做：

HTML：

     <div class="container">
       <div class="opacity">
         <div class="opaque">
           <h2>TEST</h2>
         </div>
       </div>
     </div>

CSS：

.container{
  height:200px;
  background:yellow;
}

.opacity{
 background-color: rgba(0,0,0,0.3);
 height:100%;
 width:40%
}

.opaque{
  color:brown;
  padding-left:15px;
  padding-top:15px;
}

我避免在dom元素，句点上设置不透明度，如果由于@feeela在评论中解释的原因可以避免。 Niet的答案是正确的，另外你不需要on on h2元素的不透明度，但是为了嵌套，将它包装在它自己的div中以获得灵活性可能是有意义的。