html - 将一个 div 填充到另一个 div 中并设置不透明度

Question

假设我有一个 html 对象树如下:

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

我希望 css 将内部 div 淹没在外部 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;}