png 图像透明空间覆盖它下面的锚点？答案

【问题标题】：png image transparent space covering anchors below it?png 图像透明空间覆盖它下面的锚点？
【发布时间】：2013-11-11 16:41:43
【问题描述】：

我计划制作大量动画和过渡，因此我分别插入了每一层（岛屿、每个单独的云、每个按钮），主要是图像，我无法使用 css 重新制作任何这些元素。

所以，问题是岛 - 如您所见 - 应该在按钮上方。但是当岛的 z-index 大于按钮时，按钮仍然可见，但我不能再悬停/单击它们。好像按钮被小岛的透明区域覆盖了一样。

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

【问题讨论】：

标签： html css

【解决方案1】：

你是对的——html 中的元素占据了一个矩形空间，因此无论背景图像的透明度如何，透明部分仍然会阻挡它们下方的内容。我可以想到两个解决方案：

将岛屿分成两部分（垂直的窄部分用于树，而较宽的部分用于地面）。这可能更容易。
添加具有绝对定位的额外元素，与具有较高 z-index 的按钮对齐。因此，按钮图像的 z-index 为 1，在岛/树上为 2，在按钮上方不可见、可点击的元素上为 3。

祝你好运！

【讨论】：

【解决方案2】：

你确定它没有用吗？这是Fiddle 效果很好。你position:absolute了吗？在那种情况下，正如您所说，您的岛层必须有一个更大的 div 来隐藏按钮 div。

你为什么不把它们切片，因为它们是图像并将它们排列在一起，这样 div 就不会相互交叉，这里是 raw idea...

【讨论】：