最近遇到一个弹出层在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样式问题的更多相关文章

  1. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法

    window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement ...

  3. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  5. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  6. 【position也可以很复杂】当弹出层遇上了鼠标定位（下）

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

  7. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  8. 一步步编写avalon组件01：弹出层组件

    avalon2已经稳定下来,是时候教大家如何使用组件这个高级功能了. 组件是我们实现叠积木开发的关键. avalon2实现一个组件非常轻松,并且如何操作这个组件也比以前的avalon2,还是react ...

  9. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

随机推荐

  1. [HAOI 2012] Road

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2750 [算法] 考虑计算每个点对每条边的贡献 对于每个点首先运行SPFA或Dijks ...

  2. nvidia-smi 查看GPU信息字段解读

    第一栏的Fan:N/A是风扇转速,从0到100%之间变动,这个速度是计算机期望的风扇转速,实际情况下如果风扇堵转,可能打不到显示的转速.有的设备不会返回转速,因为它不依赖风扇冷却而是通过其他外设保持低 ...

  3. PYTHON 异常处理 一 ASSERT

    assert语句,如果没记错,这个东西在C或者C++里面也有的.属于短小的断言.下面的是来自python help document的说明: Assert statements are a conve ...

  4. U盘安装 Linux 显示 “Faild to copy file from CD-ROM”

    解决方案 使用 UltraISO 刻录 U盘做镜像时,出现这种情况.查阅别人的 blog,尝试手动挂载发现还是不能成功.然后使用 win32diskimager 重新刻录,再次安装时未出现该情况. 参 ...

  5. python os.system重定向stdout到变量 ,同时获取返回值

    Python执行系统命令的方法 os.system(),os.popen(),commands 最近在做那个测试框架的时候发现 Python 的另一个获得系统执行命令的返回值和输出的类. 最开始的时候 ...

  6. counting the numbers

    题意: 给定$a,b,c$ ,求解满足 $1 \leq m \leq b, 1 \leq n \leq c, a | mn$ 的 $(m,n)$ 数对个数. $a \leq INTMAX$, $b \ ...

  7. 【Hadoop】MapReduce笔记（一）：MapReduce作业运行过程、任务执行

    一.MR作业运行过程 JobClient的runJob()方法:新建JobClient实例,并调用其submitJob()方法.提交作业后,runJob()每秒轮询作业进度,如果发现上次上报后信息有改 ...

  8. Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget

    46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...

  9. Git小白到老鸟的进阶之路

    点"计算机视觉life"关注,置顶更快接收消息! 小白:师兄,师兄,上次你教我的操作,我傻乎乎的执行了一遍,可是那个Git究竟是什么那? 师兄:小白莫慌,Git就是一种版本控制,小 ...

  10. 201621123016 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...