叠加在可点击区域 - CSS

有没有一种方法可以使用XHTML和CSS覆盖可点击区域的部分透明图像（或其他任何东西）？叠加在可点击区域 - CSS

为什么不能有重叠点击？ – 2011-06-04 00:31:59

@如果叠加层只覆盖可点击区域的一部分（至少不是如果您有一个类似于HTML5视频元素的复杂可点击区域），则建议不起作用。 – 2011-06-04 00:55:04

如果我可以这样做，那将是非常棒的：'前景：＃4297cc url（'overlay.png'）;':) – 2011-06-04 01:12:25

@thirtydot如果你知道一个解决方案仅在一个浏览器的工作原理，我依然会喜欢这里吧！虽然更支持更好。

浏览器支持：http://caniuse.com/pointer-events（作品无处不在，除了IE10及以上）

2011-06-04 02:46:09 thirtydot

该属性对我来说是新的。谢谢你教我新东西！ – 2011-06-04 04:48:22

裹在一个可点击的div覆盖和背景，以及覆盖的不透明度属性设置为东西小于1

2011-06-04 00:41:00 shelman

如果叠加层只覆盖内容的一部分，那么不在叠加层下面的内容看起来部分透明，这不是我想要的。 – 2011-06-04 01:41:34

他并没有说让可点击的div变暗;他说要在透明的div里面制作覆盖层**，因此可以显示覆盖层并使所有内容都可点击。但是，这仍然不适用于

-1

没有，顶部z-index的元素将具有焦点。但是你可以在覆盖图层上创建另一个透明顶层，这个可以点击。因此：

z-index:1 Content element 
z-index:2 Mask/Overlay element 
z-index:3 Click element

这是因为浏览器无法区分您的PNG是透明的。它只是将其作为图像，并且如果透明像素在其中，则不会通过焦点。这就是为什么你可以把一个完全空的div与固定和高度，它会被点击。

2011-06-04 01:18:27

正如我对@Andre所说的，如果覆盖层仅覆盖可点击区域的一部分（至少不是如果您有像HTML5视频元素那样的复杂可点击区域时），则您的建议不起作用。 – 2011-06-04 01:38:48

那么，如果可点击区域是一个矩形，并且总是在相同的地方，我看不到问题。但是如果你想要另一个形状的区域，或者你想让它在整个电影中移动，那么肯定是对的。 – 2011-06-04 02:02:58

回答