html - 绝对定位元素的不透明度

Question

我试图制作一个弹出框，导致周围区域变灰。我的问题是阴影 div 的不透明度似乎超过了弹出窗口的不透明度。我尝试将一个从绝对位置更改为固定位置并增加弹出窗口的 z 索引，但都没有奏效。

这是问题的屏幕截图。

以下是相关代码（询问您是否需要查看更多内容）

.textPopup
{
    width: 1400px;
    height: 600px;
    background-color: White;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 0.2;
}
#innerPopup
{
    background-color: White;
    width: 1350px;
    height: 550px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    z-index: 15;
    left: 0;
    right: 0;
    top: 50px;
    bottom: 0;
    opacity: 1;
}

... snip
    <div id="popupShadow">
    </div>
    <div class="textPopup">
        <div id="innerPopup">
        </div>
    </div>
</body>
</html>

Answer 1

你的问题#innerPopup是在里面#textPopup。然后不透明度由孩子继承，并且不能被它自己的属性覆盖。

如果无法将它们分开，则考虑使用rgba背景值而不是opacity属性值：

#textPopup {
    background-color: rgba(255,255,255,0.2);
}

您可以看到它在jsfiddle上运行。

Answer 2

通过在 CSS 中进行以下更改，您将能够使其按预期工作：

#innerPopup
{
    position: relative; /* change this to relative - will allow you to override the parent specified opacity */

    opacity: 1;

    /* other properties */
}