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 实际上只是父元素 (0.6) 的 100%。

你可以用rgba定义.rounded_box的背景色，不影响孩子。

Answer 2

如果只是在圆角框元素上寻找透明背景，请使用以下代码：

.rounded_box{
...
background-color:rgba(128,193,255,0.6);
...
/*filter:alpha(opacity=60); Remove this */
}

.rounded_box h1{
...
 }

Answer 3

一个可行的技巧是将所有文本设置在一个绝对定位的 div 中，该 div 是您希望透明的容器的兄弟。将其绝对定位在容器上方，设置 Z 索引，并确保您的父元素是相对定位的。

Answer 4

基本上没有灵丹妙药。不幸的是，不透明度会向下继承到具有不透明度的元素的所有子元素，并且无法将不透明度设置为“120%”来克服父元素上 80% 的不透明度。

我的舒适区是有一个没有不透明度的包含 div，它包含 2 个子 div：一个用于保存背景图像、圆角边缘、不透明度等；及其兄弟来保存内容。我会使用 JavaScript 将不透明 div 的高度强制为内容 div 的高度，然后我绝对将内容 div 放在不透明的上面。

或

假设我不必有条件地更改它们的颜色或任何东西，我只会使用 alpha 透明 PNG 作为圆角框的背景图像。如果您愿意分别切出顶部/底部/侧面/角落，您可以这样做并且仍然可以容纳可变宽度和高度。