html - 父元素透明的 HTML 元素不会变得不透明

Question

有什么方法可以制作其父元素是透明不透明的元素？例如，在这个jsFiddle上，我有一个带有透明父 div 的单词“blah”。我怎样才能让“blah”变得不透明？

我的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

opacity 不适用于“一个元素”，它适用于“一个元素及其所有内容”。您可以使内容比其父项更透明，但不能更不透明。