我想知道是否可以使用 HTML/CSS 创建静态照明效果叠加层。
我拥有的是一个纯粹的 HTML5/JS 应用程序，它包含在顶部导航栏的大多数页面和身体中的一系列卡片上，这些卡片通过使用滑动手势进行转换。这些都是黑色背景上的灰色。
我想要完成的是在屏幕中心有一种聚光灯渐变，它只会影响页面上的 div 而不会影响黑色背景。这个聚光灯将被固定，以便在刷卡时，它会保持在屏幕的中心。
我知道我可以用聚光灯图像作为背景覆盖一个 div，但显然这会弄乱页面上的点击/滑动。它会影响黑色背景。
有没有人有做这样的事情的经验？
一个简单的 CSS 解决方案（不需要事件）
background-attachment值为fixed.无论每个 div 当时恰好在页面上的哪个位置，它都将充当一个窗口，您可以通过该窗口看到聚光灯渐变的一部分。实际上，当 div 在它上面移动时，bg 图像保持固定在原位。
小提琴演示，以及带有圆角的相同演示。
或者，可以在 CSS 中为每个 div 赋予相同的径向渐变（也是固定的），而不是创建静态图像文件。
尝试使用带有渐变的绝对定位 div。要通过该 div 事件，请使用 css 属性pointer-events（IE 不支持）或查看该资源： http: //www.vinylfox.com/forwarding-mouse-events-through-layers/