CSS不透明度,如何在透明容器元素中有不透明元素

Question

我正在使用以下CSS代码:

.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255);  */
}
.rounded_box h1{
  opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */ 
 }

而且我希望h1和其他元素为不透明的,在div里面有类rounded_box.但也使h1和其他元素透明,我不想要.

那么可以解决这个问题呢？

Answer 1

将opacity: 0.6在.rounded_box将被应用到所有的子元素(因此.rounded_box h1,所以h1 opacity:1.0是真正的父(0.6)的只有100%.

你可以做的是rgba用来定义.rounded_box不影响孩子的背景颜色.