可点击区域上的覆盖层 - CSS

Question

有没有一种方式可以使用XHTML和CSS在可点击区域上叠加半透明的图片（或其他任何东西）？

- Web_Designer

---

为什么不让叠加层可点击呢？ - Andre Backlund

@Andre，如果叠加层仅覆盖可点击区域的一部分，则您的建议无效（至少对于具有诸如HTML5视频元素之类的复杂可点击区域而言是如此）。 - Web_Designer

如果我能这样做就太棒了：foreground:＃4297cc url（'overlay.png'）; :) - Web_Designer

你需要支持哪些浏览器？ - thirtydot

@thirtydot 如果您知道只在一个浏览器中有效的解决方案，我仍然很想听听它！尽管支持越多越好。 - Web_Designer

Answer 1

@thirtydot 如果你知道一个只在一个浏览器中有效的解决方案，我仍然很想听听！虽然支持越多越好。

你可以使用 pointer-events: none。

浏览器支持: http://caniuse.com/pointer-events（除了 IE10 和更早版本之外，在所有地方都有效）

http://jsfiddle.net/QC5Yw/

- thirtydot

---

这个属性对我来说是新的。谢谢你教了我一些新东西！ - Web_Designer

Answer 2

将覆盖层和背景放入可点击的 div 中，并将覆盖层的不透明度属性设置为小于 1 的值。

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

- shelman

---

如果叠加层仅覆盖内容的一部分，则未被叠加层覆盖的内容将呈现部分透明状态，这不是我想要的效果。 - Web_Designer

他没有说要使可点击的div半透明；他说要使覆盖层内部的div半透明，从而显示覆盖层并使所有内容可点击。然而，这仍然无法与<video>标签或Java/Flash嵌入一起使用。 - BraedenP

Answer 3

不，最高的z-index元素会拥有焦点。但是你可以在覆盖层上创建另一个透明的顶层，这个可以被点击。因此：

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

这是因为浏览器无法区分您的PNG图像中哪些部分是透明的。它只将其视为图像，如果其中有透明像素，则不会通过焦点。 这就是为什么您可以放置一个完全空的div，并固定其宽度和高度，它将是可点击的原因。

- Anze Jarni

---

就像我对@Andre说的那样，如果叠加层只覆盖可点击区域的一部分（至少在你有一个复杂的可点击区域，比如一个HTML5视频元素时），你提出的建议是不起作用的。 - Web_Designer

如果可点击区域是一个矩形并且总是在同一个位置，那么我就看不出有什么问题。但是，如果你想要另一种形状的区域，或者想让它在整个视频中移动，那么你是正确的。 - Anze Jarni