CSS：模态框的背景颜色没有改变并且不可滚动答案

【问题标题】：CSS: The background color of modal-box is not changing and it is not scrollableCSS：模态框的背景颜色没有改变并且不可滚动
【发布时间】：2019-05-19 02:48:53
【问题描述】：

我想更改模态内容的背景颜色。所有代码都在工作，但背景颜色总是显示为白色。此外，该框不可滚动。我想在框内单击时滚动它。

.modal {
    font-weight: bold;
    display: none;
    position: fixed;
    z-index: 1;
    padding: 50px 0px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    / background-color: rgb(0, 0, 0, 0.4);
}

.modal-content {
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 500px;
    text-align: center;
    background-color: transparent;
}

【问题讨论】：

overflow: auto; 后面有一个斜线，这可能会阻止下一行工作。

标签： css background-color scrollable

【解决方案1】：

插入溢出：自动；最好使用溢出：滚动

【讨论】：

【解决方案2】：

似乎您正在尝试使用 rgb 而不是 rgba，反之亦然。

rgb 应该采用如下 3 个参数：rgb(0, 0, 0);
rgba 应该有 4 个参数 rgba(0, 0, 0, 0.4); 第四个参数是不透明度。

为了理解差异，您可以查看以下问题：Difference between hex colour, RGB, & RGBA and when should each they be used?

根据可滚动性，您可以使用 overflow: auto; 但您可以使用 overflow: scroll; 表示您要隐式启用可滚动模型。

有关溢出属性的更多信息：CSS overflow Property

【讨论】：