如何防止图像叠加不可点击

Question

我在公司中有以下横幅设计：

（点击图片查看完整图片。）

现在存在以下错误，让我首先在视觉上向您展示：

（点击查看完整图像）。

现在标题需要低于标准，但因为我使用了图像并且绝对定位，所以红色区域实际上仍然是图像。我需要它作为横幅，因为点需要可点击。

我如何去做这个，我试过的一个解决方案是使用div而不是图像，给它一个高度，然后添加图像作为背景，但这相当于做同样的事情，也创造了相同的错误，我知道这是一个难以解决的问题，但我可以使用图像，仍然可以逃脱IE没有这个bug，这就是我现在正在寻找的东西，我知道可能有画布或SVG解决方案，但我不能在这个项目中使用canvas或SVG。

可以看到 HERE 。

谢谢。

Answer 1

应用＆＃34;指针事件：无＆＃34;对你的形象，它会工作：

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

图片现在不会阻挡你的元素。

MDN说明：

  

除了表明该元素不是鼠标的目标   事件，值none指示鼠标事件进入＆＃34;通过＆＃34;该   元素和目标是＆＃34;在＆＃34;下面＆＃34;而是那个元素。

我相信MDN的解释几乎总结了它。

Answer 2

pointer-events: none;可能存在支持问题，但我对此并不十分确定。我使用了z-index并在您的链接参考中，我发现如果我将z-index:99999提供给<div class="sp-layer">，则这些DOTS会变为可点击.. !! 希望这会有所帮助。