单击图像的透明区域

Question

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

我想将两座建筑物并排放置。如果用户点击最近图像的透明区域（绿色），则点击会通过并走得更远（更高的那个）。

我已经检查，没有运气：

Click through transparent area on partially transparent image

Click area on sprite in canvas

Answer 1

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

我的建议是添加另一张绿色形状的图片，其中的确切内容放在红房子图片的顶部。 因此，您有三张图片，底部的图片较远，建筑物顶部的红色房屋以及红楼顶部建筑的特殊形状。所以当人们点击透明区域时，他们实际上点击了特殊的形状，而不是点击红色的房子图片。然后您可以附加链接到绿色区域的特殊形状，以便链接到两层建筑。这是我能想到的最简单的方法。

希望它有帮助。