Html png图像透明空间，覆盖下面的锚？

我正在做这个设计

我计划制作大量的动画和过渡，所以我分别插入了每个层（岛、每个云、每个按钮），主要是作为图像，我无法使用css重新制作这些元素

所以，问题是岛——正如你所看到的——应该在按钮上方。但当岛的z指数大于按钮时，按钮仍然可见，但我不能再悬停/单击它们。好像按钮被岛上的透明区域覆盖着

在这种情况下，推荐的修复方法是什么？

你说得对——html中的元素占用了一个矩形空间，因此不管背景图像的透明度如何，透明部分仍会阻止它们下面的内容。我可以想出两种解决办法：

将岛分为两部分（垂直狭长部分用于树，较宽部分用于地面）。这可能更容易

添加具有绝对定位的额外元素，这些元素与具有更高z索引的按钮对齐。因此，按钮图像的z索引为1，在岛/树上为2，在按钮上方的不可见可点击元素上为3

---

祝你好运

你确定它不起作用吗？这是一个很好用的方法。您是否

位置：绝对
？
在这种情况下，正如你所说，你的岛层必须有一个更大的div，隐藏按钮div

既然它们是图像，为什么不将它们切分一点，然后将它们排列在一起，这样div就不会相互交叉，这里有一个…
也许你可以在岛上放置不可见的按钮，它们代表实际的按钮？
z-index
与定位元素一起工作。你给他们定好位置了吗？