div样式继承问题答案

【问题标题】：Div style inheritance issuediv样式继承问题
【发布时间】：2011-11-28 22:05:18
【问题描述】：

我正在尝试将一个 DIV 嵌入到另一个 DIV 中，但它不会继承包装器 DIV 的不透明度样式。

样式代码：

#outer {
background-color: #000;
width: 400px;
height: 400px;
z-index: 0;
opacity: 1;
}

#inner {
background-color: #000;
width: 200px;
height: 200px;
z-index: 1;
opacity: 0.5;
}

HTML 代码：

<div id="outer">
    <div id="inner">
    </div>
</div>

我尝试了几种不同的解决方案，但目前还没有一个有效。

【问题讨论】：

div需要嵌套吗？我一直通过使用绝对定位将不透明 div 放在透明 div 之上来解决这个问题。

标签： css html opacity

【解决方案1】：

您可以使用 CSS3s rgba 属性来解决该问题（适用于颜色）。

background-color: rgba(0, 0, 0, .7);

如果您想支持不支持 CSS3 或 rgba 属性的旧版浏览器（或者当您在背景中有图像时），这里是其他可能解决方案的链接：

其他跨浏览器解决方案是为您的 div 使用半透明 PNG。

【讨论】：

如果您只想要颜色，请确定答案。 +1
是的，这确实是唯一的解决方案！这个答案说明了一切
我会尝试使用 rgba，但可能会退回到仅使用图像。似乎很愚蠢，它只是不“工作”。

【解决方案2】：

你不可能做那个人。

两种解决方案，如果只是背景色，你可以：

使用透明的 .png 图片
使用 RGBA。例如，对于透明度为 60% 的黑色：background-color: rgba(0, 0, 0, .6);

【讨论】：

这很好用，但它受到支持 CSS3 的浏览器的限制。我在 IE8 中尝试过，但它不能正常工作。看起来我的选择将是透明图像。

【解决方案3】：

这是不可能的。不透明度将应用于其中的所有内容。 See the spec for more information.

【讨论】：