javascript - 覆盖可点击的div

Question

我想知道是否有一种方法使用 css 或 javascript 允许半透明的 div 元素在视觉上显示在所有其他元素之上，但仍可以单击它下面的超链接和其他交互元素？只是一个异想天开的想法，让我的网站能够使网站的外观变暗或变亮。

编辑

我知道 z-index 将对象从背景移动到前景，但它们也会阻止交互式对象...

Answer 1

这种行为可能通过 poiner-events:none(非标准且不受 IE 支持)实现。最初是 SVG 功能，它支持任何 SVG 元素 (IE 9+):

<svg poiner-events="none">
  <rect width="100%" height="100%" fill="black" fill-opacity="0.5" />
</svg>

但对于您提到的效果，我建议在 body 上使用不透明度，在 html 上使用一些背景:

body {
  opacity: 0.5;
}

html {
  background: black;
}