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

Question

我正在制作这个设计 http://postimg.org/image/z0w6wb4zb/

我正在计划制作大量的动画和过渡，所以我分别插入每一层（岛，每个云自己，每个按钮），主要是作为图像，我无法使用CSS重新制作任何这些元素。

所以，问题是岛屿 - 你可以看到 - 应该在按钮上方。但是当岛的z-index比按钮大时，按钮仍然可见，但我不能再悬停/点击它们了。好像按钮被岛上的透明区域所覆盖。

在这种情况下，推荐的解决方案是什么？

Answer 1

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

1. 将岛屿分成两部分（树的窄垂直部分，地面的宽部分）。这可能更容易。

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

祝你好运！

Answer 2

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

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