我想知道是否可以使用 HTML/CSS 创建静态光照效果叠加。
我拥有的是一个纯 HTML5/JS 应用程序，它由顶部导航栏的大多数页面和主体中的一系列卡片组成，这些卡片通过使用滑动手势进行转换。这些都是黑色背景上的灰色。
我想要实现的是在屏幕中央有一种聚光灯渐变，它只影响页面上的 div，而不影响黑色背景。该聚光灯将被固定，以便在滑动卡片时，它保持在屏幕中央。
我知道我可以用聚光灯图像作为背景覆盖一个 div，但显然这会扰乱页面上的单击/滑动。并且它会影响黑色背景。
有人有这样做的经验吗？
最佳答案
简单的 CSS 解决方案(无需事件)
- 创建带有聚光灯渐变的全页宽度背景图像。
- 为每个 div 提供这个背景图像，
background-attachment值为fixed。
无论每个 div 当时恰好位于页面上的哪个位置，它都会充当一个窗口，通过它您可以看到部分聚光灯渐变。实际上，当 div 在其上移动时，背景图像保持固定。
Fiddle demo ，以及与 heavily-rounded corners 相同的演示.
或者，可以在 CSS 中为每个 div 提供相同的径向渐变(也是固定的)，而不是创建静态图像文件。
关于javascript - 可以使用 HTML/CSS 创建静态灯光效果叠加吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11873398/