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

.rounded_box 中的 opacity: 0.6 将应用于所有子元素(因此 .rounded_box h1。因此 h1 opacity:1.0 实际上只是父级的 100% (0.6)。

你可以做的是使用 rgba 定义 .rounded_box 的背景颜色，这不会影响 child 。