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;
}

Answer 2

在现有 div 之上创建另一个 div 元素，并使其 z-index 大于现有的。希望这会有所帮助。