html - 如何在不影响带有 html/css 的子元素的情况下应用不透明度？

Question

我想用 html 和 css 来实现:

我尝试将容器的不透明度设置为 0.3，将框设置为 1，但它不起作用:两个 div 的不透明度都是 0.3。

jsFiddle of my try here

我想要达到的效果是在页面顶部出现一个弹出框。它通过淡化下面的内容(通过降低不透明度)来突出显示。

Answer 1

您可以将不透明度与背景色结合使用，如下所示:

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​Live demo