大概原理就是
写一个div,宽高同视口,然后固定定位,层级高低看需要
然后使用pointer-events:none;
pointer-events
CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events
属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
参考代码如下
pointer-events: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: 0.382;
z-index: 998;
background: url(data:image/png;base64,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) 0px 0px repeat;
破罐子互摔