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