父元素透明的 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

随着不透明度的增加， child 的不透明度不能高于他们的 parent 。

您可以使用 png 背景或 rgba 颜色: http://css-tricks.com/rgba-browser-support/

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