重叠div"不可点击",以便可以访问下面的内容？

Question

我正在使用具有降低的不透明度的JPG叠加效果,但是我希望它仅作为效果并使得该div下方的内容可单击.这是可能的,谢谢:)))

谢谢大家的评论.我想我必须考虑别的因为JPEG涵盖了整个页面:)

Answer 1

那么pointer-events:none;只有少数浏览器现代浏览器(和IE11)支持它.

https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

是的，有可能

使用pointer-events: none与IE11 CSS的条件语句一起（因为它不工作，IE10或以下），就可以得到一个跨浏览器兼容的解决方案来实现这一目标。

使用AlphaImageLoader，您甚至可以将透明.PNG/.GIFs 放在叠加层中，div并将点击传播到下面的元素。

CSS：

pointer-events: none;
background: url('your_transparent.png');

IE11 条件：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

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