Html 如何防止图像覆盖无法读取

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

（单击图像以查看完整图片。）

现在存在以下错误，让我先直观地向您展示：

（单击以查看完整图像）

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

我该怎么做呢，我尝试过的一个解决方案是使用div而不是图像，给它一个高度，然后添加图像作为背景，但这等于做了同样的事情，也产生了同样的错误，我知道这是一个很难解决的问题，但是我可以使用一个图像并且仍然逃脱，即没有这个错误，这就是我现在正在寻找的，我知道可能有一个canvas或SVG解决方案，但我不能在这个项目中使用canvas或SVG

可以看到该错误

谢谢。

将“指针事件：无”应用于您的图像，然后它将工作：

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

现在图像将不会阻挡下面的元素

MDN说明：

除了指示元素不是鼠标的目标之外 事件，值none指示鼠标事件“通过”事件 元素，并以该元素“下面”的任何内容为目标

我相信MDN的解释基本上概括了这一点

将“指针事件：无”应用于您的图像，然后它将工作：

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

现在图像将不会阻挡下面的元素

MDN说明：

除了指示元素不是鼠标的目标之外 事件，值none指示鼠标事件“通过”事件 元素，并以该元素“下面”的任何内容为目标

---

我相信MDN的解释基本上概括了这一点

指针事件可能存在支持问题：无z-index，在你的链接引用中，我发现如果我将

z-index:99999

给

，这些点就可以点击了。。！！

---

希望这有帮助。

指针事件可能存在支持问题：无z-index，在你的链接引用中，我发现如果我将

z-index:99999

给

，这些点就可以点击了。。！！

---

希望这有帮助。

您可以使用图像和覆盖的z索引值。在chrome中也可以点击圆圈。这不是你想要的吗？我相信没有人理解你。请编辑您的问题，并尽量告诉我们需要什么。剩下的就交给我吧reader@AmitJS94是的，但请记住，文本必须在下面的很多地方出现，然后才在演示中出现！：）。。因此，当我这样做时，它将不起作用。这是因为您的基础图像通过“位置：绝对”重叠，以及为什么它不可单击，以便您可以更好地对齐图像，但@Bluesight suggestion将对该错误对齐进行修复。您可以使用图像和重叠的z索引值。在chrome中也可以点击圆圈。这不是你想要的吗？我相信没有人理解你。请编辑您的问题，并尽量告诉我们需要什么。剩下的就交给我吧reader@AmitJS94是的，但请记住，文本必须在下面的很多地方出现，然后才在演示中出现！：）。。因此，当我这样做时，它将不起作用。这是因为你的基础图像通过“位置：绝对”重叠。至于为什么它不可点击，以便你可以更好地对齐图像，但@Bluesight建议将对该错误对齐进行修复。我已经尝试过，是的，它起作用了，圆点可以通过上述解决方案点击。请检查他的答案，如果它解决了你的问题，请给他打勾。我已经尝试过了，并且成功了，上面的解决方案可以点击点。请检查他的答案，如果它解决了你的问题，请给他打勾。