Question

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

Here是问题的屏障。

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

.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 */
}

绝对定位元素的不透明度

2 个答案: