html - CSS:设置整个页面的不透明度

Question

我正在制作我的电子作品集，我有一个弹出框。假设这会使它后面的整个屏幕变暗，直到您向下滚动时它才会变暗。我不确定你们是否知道 gyazo 但这是我的意思的 gif。 (如果你不想点击它也没关系。) https://gyazo.com/0513512615ee2e0dd169db12a222a06b

好的，这是 HTML 代码

<div id="View_Code_Car" class="overlay">
    <div class="Popup">
        <h2>'Car' - Processing Project Code</h2>
        <a class="close" href="#">×</a>
        <div class="Content">
            <img src = "Images/View_Code_Car.png" <img/>
        </div>
    </div>
</div>

和 CSS

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 350ms;
    visibility: hidden;
    opacity: 0;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

弹出窗口有更多代码，但它不控制不透明度或任何东西

Answer 1

您可能需要将模态覆盖设置为 position: fixed; 以使其附着在窗口上。 position: absolute; 将自身引用到设置为“position: relative;”的最近的父容器。

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 350ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999999;
}

您仍然可以滚动页面，但模式将保持固定在窗口上。