Javascript 半透明层，但单击会穿过较低层

我需要一个半透明的图像分层覆盖在我的网页中的所有内容上，但这样用户就可以点击下面的表单输入和文本字段。用户将不会与顶部图像层交互

我想我可以在photoshop中创建图像并调整不透明度。然后将png放入具有适当z索引的div中。但用户点击后仍然会转到顶部div，而不是下面的层

我还能从这里做些什么，或者用其他方法来达到预期的效果吗

---

我只是在用html，css，js。没有服务器端的东西。谢谢

点击图片/div，检查以下答案：

报价代码：

CSS

有条件的

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',

定尺寸方法（='scale'）； 背景：没有！重要的

下面是一个包含所有代码的基本示例页面

更新：

您可以将它与IE中的这项技术结合起来（问题是它在IE中工作，但在Firefox中不工作），或者您可能需要一些JavaScript，而不是上面引用的答案

更新2:

---

我不想打开这个，因为也许你有很好的理由这样做，但是很明显，正如在其他答案中提到的，你可以考虑使用背景图像和不透明度来代替（这样图片低于内容的顶部），然后你就不必担心点击了。如果在你的情况下这是可能的，那就去做吧。

你可能想用相反的方式来思考这个问题：表单元素在上面，图像在后面

将表单元素封装在具有白色背景的容器中，并调整此容器元素上的不透明度。让您的图像位于内容后面，并使用绝对定位将其与DOM布局的其余部分隔离开来

<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
  <!-- form elements, etc -->
</div>

---

应该可以让您接近想要的效果，而不必对抗浏览器的默认事件处理

看看事件冒泡：链接解决方案仅适用于完全透明的覆盖。这实际上是IEB中的一个错误，哪个链接？另一个问题有两个答案，还有第三个问题。

<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<div id="content-container" style="background: #fff; opacity: .6;">
  <!-- form elements, etc -->
</div>