Overlay 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比现有的更多。希望这应该有所帮助。