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和其他元素设置为不透明，这些元素位于具有类rounded_box的div中。但也使h1和其他元素透明，我不想要。

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

Answer 1

opacity: 0.6中的.rounded_box将应用于所有子元素（即.rounded_box h1。因此h1 opacity:1.0实际上只有100％父母（0.6）。

您可以使用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：一个用于保存bg图像，圆形边缘，不透明度等;和它的兄弟抱着内容。我使用JavaScript来强制不透明div的高度为内容div的高度，然后我绝对将内容div放在不透明的div上。

OR

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

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

4 个答案: