我需要在网页的所有内容上叠加一个半透明的图像,但是用户可以单击进入下面的表单输入和文本字段.用户将不会与顶部图像层进行交互.

我想我可以在Photoshop中创建图像并调整不透明度.然后将png放入具有适当z-index的div中.但随后,用户点击仍然会转到该顶部div,而不是其下方的图层.

从这里开始,我还有什么可以做的呢,或者还有其他方法可以达到预期的效果？

我正在使用html,css,js.没有服务器端的东西.谢谢！

解决方法:

您可能想以相反的方式来考虑：表单元素在顶部,图像在后面.

将表单元素封装在具有白色背景的容器中,并调整此容器元素的不透明度.让您的图像位于内容后面,并使用绝对定位将其与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>

应该使您接近所需的效果,而不必使用浏览器的默认事件处理方法.