Question

我遇到了问题。我想要内容div的透明背景。但并非所有内容都在其中。我无法做到这一点：

<div class="notTransparent"> <div class="transparent"></div> content </div>

还有其他工作吗？

Answer 1

CSS rgba

http://www.css3.info/preview/rgba/ http://www.css3.info/preview/opacity/

Answer 2

我想我之前已经做过这件事（尽管很久以前）。你做的是有一个带显示的div：relative，然后是显示的另一个div：absolute，left：0px，top：0px，width：100％和height：100％。也许应用z-index：-10（把它放在所有其他内容之后）。然后，您可以将内容置于顶级（相对）div中。给我几分钟，我会为你编写代码...

好的 - 尝试以下方法：

.transparent {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.opaque {
    position: relative;
}
.content {
    position: absolute;
    left: 10px;
    top: 10px;
}

<div class="opaque">
    <div class="transparent">
        <img src="/Images/header1.png"/>
    </div>
    <div class="content">
        Hello world!
    </div>
</div>

不幸的是我找不到将相对元素放在透明div上的方法。如果有人找到方法，请在此处粘贴代码。顺便说一下，实际上不需要指定任何z索引。

Answer 3

我前段时间也遇到了透明度的继承问题，这对我来说很有用：http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack（demo）。

不透明度传播

3 个答案: