单击图像的透明区域

Question

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

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

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

Click through transparent area on partially transparent image

Click area on sprite in canvas

Answer 1

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

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

希望对你有帮助。