html - 親要素が透明な HTML 要素が不透明にならない

Question

親が透明で不透明な要素を作成する方法はありますか? たとえば、このjsFiddleには、透明な親 div を持つ「何とか」という単語があります。「何とか」を不透明にするにはどうすればよいですか?

私のhtml：

<div><p class="blah">blah</p></div>

私のCSS：

div{
    height:100px;
    width:100px;
    margin:auto;
    background-color:white;
    opacity:0.5;
}
.blah{
    opacity:1;
}
body{
    background-color:blue;    
} 

Answer 1

Children can't have a higher opacity than their parents as their opacities multiply.

You use could png backgrounds or rgba colors: http://css-tricks.com/rgba-browser-support/

div {
  background-color: rgba(255,255,255,0.5);
}

Answer 2

不透明度は「要素」には適用されず、「要素とそのすべてのコンテンツ」に適用されます。コンテンツを親よりも透明にすることはできますが、不透明にすることはできません。