覆盖可点击区域 - CSS

Question

有没有办法可以使用XHTML和CSS覆盖可点击区域的部分透明图像（或任何真正的图像）？

Answer 1

  

@thirtydot如果你知道一个解决方案   我仍然只在一个浏览器中工作   我会爱在这里！虽然   更多支持更好。

您可以使用pointer-events: none。

浏览器支持：http://caniuse.com/pointer-events（适用于除IE10及更旧版本以外的所有地方）

http://jsfiddle.net/QC5Yw/

Answer 2

将叠加层和背景包裹在可点击的div中，并将叠加层的不透明度属性设置为小于1的值。

http://www.w3schools.com/Css/css_image_transparency.asp

Answer 3

不，顶级z-index元素将具有焦点。但是您可以在覆盖层上创建另一个透明顶层，这个可以点击。所以：

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

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