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