Html 为什么CSS不透明度会影响上面的div?
在HTML元素中有覆盖层,在覆盖层中有包含消息的元素。但对于某些原因,上面的元素也会从下面的元素获得不透明度 编辑:我只在最新的Firefox上测试过这个 下面是解释问题的CSS示例代码:Html 为什么CSS不透明度会影响上面的div?,html,css,overlay,opacity,Html,Css,Overlay,Opacity,在HTML元素中有覆盖层,在覆盖层中有包含消息的元素。但对于某些原因,上面的元素也会从下面的元素获得不透明度 编辑:我只在最新的Firefox上测试过这个 下面是解释问题的CSS示例代码: .overlay { z-index: 1000; border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt; left: 0pt;
.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 class="modal">
<div class="overlay">overlay</div>
<div class="message">message</div>
</div>
这里的消息不是覆盖的后代,因此不受覆盖样式的影响。你说的“上面的div”是什么意思?你的意思是“覆盖”还是其他?如果是另一个,请发布该代码。为什么消息元素是透明的?
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
/* … */
}
.message {
/* … */
}