覆盖可以点击的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比现有的更多。希望这应该有所帮助。