可以使用HTML/CSS创建静态照明效果覆盖吗？

Question

我想知道是否有可能使用HTML/CSS创建静态照明效果覆盖。

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

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

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

有人做过这样的事情吗？

Answer 1

一个简单的CSS解决方案(不需要活动)

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

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

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

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

Answer 2

尝试使用带有渐变的绝对定位div。有关使用css属性pointer-events (IE不支持)传递该div事件的信息，请参阅该资源：http://www.vinylfox.com/forwarding-mouse-events-through-layers/