为什么 CSS 不透明度会影响上面的 div？答案

【问题标题】：Why CSS opacity is affecting div above it?为什么 CSS 不透明度会影响上面的 div？
【发布时间】：2011-03-20 12:17:18
【问题描述】：

我在 HTML 元素内有叠加层，在该叠加层内我有包含消息的元素。但是对于某些共振，上部元素也会从其下方的元素中获得不透明度。

编辑：我只用最新的 Firefox 测试过这个。

这里是解释问题的 CSS 示例代码：

.overlay {
    z-index: 1000;
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
    background-color: #fff;
    opacity: 0.6;
    cursor: wait;
    position: absolute;
}
.overlay .message {
    z-index: 1001;
    position: absolute;
    padding: 0px;
    margin: auto;
    width: 30%;
    top: 15%;
    left: 30%;
    text-align: center;
    color: #fff;
    border: 3px solid red;
    background-color: #fff;
    background: fuchsia;
    font-size: 18px;
    font-weight: bold;
    padding: 5%;
}

这里是 HTML 代码：

<div class="overlay">
    <div class="message">
        test
    </div>
</div>

【问题讨论】：

“上面的div”是什么意思？你的意思是overlay 还是其他？如果另一个请发布该代码。
为什么消息元素是透明的？

标签： html css overlay opacity

【解决方案1】：

不透明度不仅影响元素本身，还影响 overlay 中的所有内容（message 也是如此）。如果您将叠加层和消息分开，它会起作用：

<div class="modal">
    <div class="overlay">overlay</div>
    <div class="message">message</div>
</div>

还有 CSS：

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay {
    /* … */
}
.message {
    /* … */
}

这里 message 不是 overlay 的后代，因此不受 overlay 样式的影响。

【讨论】：