半透明层，但点击进入下层答案

【问题标题】：Semi-transparent layer, but clicks go through to lower layer半透明层，但点击进入下层
【发布时间】：2012-02-17 06:29:49
【问题描述】：

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

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

我可以从这里做更多的事情，或者用其他方法来达到预期的效果吗？

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

【问题讨论】：

看看事件冒泡：quirksmode.org/js/events_order.html

标签： javascript html transparency opacity layer

【解决方案1】：

要点击图片/div，请查看以下答案：

Click through a DIV to underlying elements

引用代码：

CSS
 pointer-events:none;
 background:url('your_transparent.png');
IE 条件
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png',
sizingMethod='规模'); 背景：无！重要；

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

http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html

更新：

您可以将它与 http://jsfiddle.net/jpCfz/6/ 中的 Make overlay background click-through-able 用于 IE 的技术结合使用（问题是它在 IE 中有效，但在 Firefox 中无效），或者您可能需要在 Click through a DIV to underlying elements 其他答案中描述的一些 JavaScript比上面引用的。

更新 2：

我不想打开这个，因为也许你有充分的理由这样做，但显然，正如另一个答案中提到的，你可以考虑使用背景图像和不透明度（所以图片在下面内容不在其之上），然后您无需担心点击。如果这对你来说是可能的，那就去吧。

【讨论】：

链接解决方案仅适用于完全透明的叠加层。这实际上是 IE 中的一个错误
哪个链接？另一个问题有两个答案，还有第三个问题。

【解决方案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>

应该让您接近您想要的效果，而不必与浏览器的默认事件处理作斗争。

【讨论】：