Question

我试图将一个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>

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

Answer 1

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

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

如果您想支持不支持CSS3或rgba属性的旧浏览器（或者在后台有图像时），可以使用以下链接到其他可能的解决方案：

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

Answer 2

你无法做那个男人。

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

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

Answer 3

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

Div样式继承问题

3 个答案: