涉及到弹出层的opacity样式问题
Posted 立早喵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了涉及到弹出层的opacity样式问题相关的知识，希望对你有一定的参考价值。
最近遇到一个弹出层在Chrome中重复的问题，观察发现是opacity引起的
以下是代码及现象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fixing {
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: 9999;
background: #ffffff;
opacity: 0.2;
}
.fixing>div {
width: 250px;
height: 100px;
position: absolute;
top: 30%;
left: 50%;
margin-left: -125px;
color: #fff;
font-size: 18px;
display: inline-block;
vertical-align: middle;
line-height: 100px;
text-align: center;
background: #000;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="fixing" id="_loadingpageAuL41zL5pW">
<div> <span>正在加载</span> <img src="/static/common/images/load.gif"></div>
</div>
</body>
</html>
图中只有第一个灰色弹出层是能定位到节点的，其他的都不能找到对应节点，好像是第一个的影子一样。
解决方案是非IE浏览器使用background:rgba(255,255,255,0.2)来代替原来的background和opacity,IE则用原来的方式background和filter。
虽然有了解决方案但是并不能解释清楚根本原因，有哪位大神可以给出官方解释呢？
以上是关于涉及到弹出层的opacity样式问题的主要内容，如果未能解决你的问题，请参考以下文章