单击图像的透明区域

Question

可以html / css本地点击图像的透明区域吗？

我想并排放置两座建筑物。如果用户点击最近图像的透明区域（绿色），则点击将通过并进一步（较高的）。

我已经检查过，没有运气：

Click through transparent area on partially transparent image

Click area on sprite in canvas

Answer 1

单独使用html / css可能非常困难。甚至加上javascript，因为当你点击红房子图片时，事件会在图片本身上触发。你定义的绿色区域不是正方形。简单地在html / css中很难定义这样的区域。

我的建议是添加另一张绿色形状的图片，其中包含它的确切内容并将其放在红屋图片的顶部。 结果，你有三张照片，底部的距离越远，建筑物顶部的红房子，以及红房子顶部的建筑物的特殊形状。因此，当人们点击透明区域时，他们实际上点击特殊形状，而不是点击红房子图片。然后，您可以将链接附加到绿色区域的特殊形状，以便链接到两个级别的建筑物。这是我能想到的最简单的方法。

希望它有所帮助。