我在 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>
最佳答案
不透明度不仅会影响元素本身,还会影响 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 样式的影响。
关于html - 为什么 CSS 不透明度会影响上面的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3325300/