改变整个页面的颜色

Question

我有一个按钮可以创建一个弹出窗口并使我的页面背景变黑。这有效，但它不会影响任何 bootstrap 容器。我目前正在使用 bootstrap 4 并做出反应。

我的 css 这个 pop 在下面

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0, 0.5) !important;
}
.popupInner {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    border-radius: 20px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    background: white;
}

任何人都知道如何定位这些容器。

Answer 1

在弹出窗口上设置 z-index 可能会修复它（例如 z-index: 1）。

如果这不能解决问题，您可能需要在这些 bootstrap 元素上设置较低的 z-index（例如 z-index: 0）

改变整个页面的颜色

Change color of entire page

css

styling

reactjs

react-bootstrap

bootstrap-4