在另一个div中泛滥div并设置不透明度

Question

假设我有一个html对象树，如下所示：

<div>
    <p>Text 1</p>
    <p>Text 2</p>
    <div></div>
</div>

我希望css在内部div内部泛滥。但是我希望文本等完整无缺。我的想法是我可以为内部div设置bg颜色和不透明度而不影响文本。我该怎么做？

编辑：只是为了强调我的观点： 我可以很好地设置外部div的不透明度，但里面的文本也会褪色。我不希望这种情况发生

Answer 1

您可以将外部div设置为position：relative，然后将内部div设置为：

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

并设置你想要的任何东西。它现在应该涵盖第一个div内的所有内容。如果您希望文本显示在它上面，只需设置：

div p {
   position: relative;
   z-index: 1;
}

div div {
   z-index: 0;
}

Answer 2

你的意思是这样吗？

div>div {
    background-color: red;
    opacity: 0.5;
}

它使用子选择器，因此只选择另一个div内的div。由于div几乎是最常见的HTML元素，因此我建议至少为其中一个分配一个类名。

<div class="innerDiv"></div>

然后，您可以在CSS样式表中使用.innerDiv {}设置样式。

Answer 3

你无法做到这一点，你需要做的是以下几点：

<div class="maindiv">
    <p>Text 1</p>
    <p>Text 2</p>
</div>

<div class="floatingbkg"></div>

并将不透明度应用于floatingbkg，然后将它们放在一起，并将浮动信息放在maindiv后面。

我确实创建了一个jqueryplugin来做到这一点，但我还没有完成它，它模拟了iPhone的弹出窗口。

你需要使用相对定位等来使div彼此过分。

Answer 4

我不清楚你的意思是什么：“泛滥”但要达到这个目的，你可以使用css规则层次结构：

div {}

影响所有div

div div{}

影响其他div中的所有div

Answer 5

使用RGBa - 有关示例，请参阅CSS-Tricks。这会改变背景的不透明度，但不会改变文本的透明度。