html - 如何防止图片叠加不可点击

Question

我在企业中有以下横幅设计:

(点击图片查看完整图片。)

现在存在以下BUG，我先给大家看一下:

(点击查看全图)。

现在标题需要放在下面很多，但是因为我已经使用了一个图像并且绝对定位了它，所以红色区域实际上仍然是图像。我需要它成为横幅，因为点需要可点击。

我该怎么做，我尝试过的一个解决方案是使用 div 而不是图像，给它一个高度，然后将图像添加为背景，但这相当于做同样的事情并且创建相同的东西错误，我知道这是一个很难解决的问题，但我可以使用图像并仍然摆脱 I.E.没有这个错误，这就是我现在正在寻找的，我知道可能有 Canvas 或 SVG 解决方案，但我不能为这个元素使用 Canvas 或 SVG。

bug可见 HERE .

谢谢。

Answer 1

将“pointer-events: none”应用于您的图像，然后它将起作用:

.curved-img-wrpr img {
    pointer-events: none;
}

图片现在不会遮挡下方的元素。

MDN 解释:

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

我相信 MDN 的解释非常概括了这一点。