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

Possible to create a static lighting effect overlay using HTML/CSS?

本文关键字：照明 叠加 静态 创建 HTML CSS 可以使      更新时间：2023-09-26

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

我拥有的是一个纯粹的HTML5/JS应用程序，它由顶部导航栏的大多数页面和正文中的一系列卡片组成，这些卡片使用滑动手势进行过渡。 这些都是黑色背景上的灰色。

我想完成的是在屏幕中央有一种聚光灯渐变，它只影响页面上的div，而不是黑色背景。 此聚光灯将被固定，以便在滑动卡片时，它保留在屏幕中央。

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

有人有做这样的事情的经验吗？

一个简单的CSS解决方案（不需要事件）

  • 创建具有聚光灯渐变的全页宽度 bg 图像。
  • 给每个div这个bg图像，background-attachment值为fixed。

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

小提琴演示，以及带有大量圆角的相同演示。

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

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

相关文章：