可以使用 HTML/CSS 创建静态照明效果叠加层吗？

Question

我想知道是否可以使用 HTML/CSS 创建静态照明效果叠加层。

我拥有的是一个纯 HTML5/JS 应用程序，它包含顶部导航栏的大多数页面和一系列通过使用滑动手势转换的正文卡片。这些都是黑色背景上的灰色。

我想要完成的是在屏幕中心有一种聚光灯渐变，它只会影响页面上的 div 而不会影响黑色背景。这个聚光灯会被固定，这样当刷卡时，它会保持在屏幕的中心。

我知道我可以用聚光灯图像作为背景覆盖一个 div，但显然这会弄乱在页面上的点击/滑动。它会影响黑色背景。

有没有人做过这样的事情？

Answer 1

简单的 CSS 解决方案（无需事件）

• 使用聚光灯渐变创建一个全页宽度的 bg 图像。
• 为每个 div 提供此 bg 图片，background-attachment 值为 fixed。

无论每个 div 当时恰好在页面上的哪个位置，它都会充当一个窗口，通过它您可以看到聚光灯渐变的一部分。实际上，当 div 在其上方移动时，bg 图像保持固定不动。

Fiddle demo，以及与heavily-rounded corners 相同的演示。

或者，可以在 CSS 中为每个 div 赋予相同的径向渐变（也是固定的），而不是创建静态图像文件。

Answer 2

尝试使用带有渐变的绝对定位 div。要通过该 div 事件，请使用 css 属性 pointer-events（IE 不支持）或查看该资源：http://www.vinylfox.com/forwarding-mouse-events-through-layers/