Question

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

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

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

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

Answer 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），或者您可能需要一些JavaScript中描述的JavaScript {3}}除了上面引用的其他答案。

更新2：

我不想打开这个，因为也许你有充分的理由这样做，但显然，正如其他答案所提到的，你可以考虑使用背景图像和不透明度（所以图片低于内容不在其上面）然后你不必担心点击。如果你的情况可以做到这一点，那就去吧。

Answer 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>

应该让你接近你想要的效果，而不必打击浏览器的默认事件处理。

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

2 个答案: