單擊圖像的透明區域

Question

html/css本身可以單擊圖像的透明區域嗎？

我想將兩座建築物並排放置。如果用戶點擊最近圖像的透明區域（綠色），則點擊會通過並走得更遠（更高的那個）。

我已經檢查，沒有運氣：

Click through transparent area on partially transparent image

Click area on sprite in canvas

Answer 1

HTML/CSS孤獨可能是非常困難的。甚至加上JavaScript，因爲當你點擊紅房子圖片時，事件就會在圖片上觸發。你定義的綠色區域不是正方形。很難簡單地在html/css中定義這樣的區域。

我的建議是添加另一張綠色形狀的圖片，其中的確切內容放在紅房子圖片的頂部。 因此，您有三張圖片，底部的圖片較遠，建築物頂部的紅色房屋以及紅樓頂部建築的特殊形狀。所以當人們點擊透明區域時，他們實際上點擊了特殊的形狀，而不是點擊紅色的房子圖片。然後您可以附加鏈接到綠色區域的特殊形狀，以便鏈接到兩層建築。這是我能想到的最簡單的方法。

希望它有幫助。