PNG 图像透明空间覆盖其下方的锚点



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

计划制作大量动画和过渡,所以我分别插入了每个图层(岛屿,每个云本身,每个按钮),主要是作为图像,我无法使用css重新制作任何这些元素。

所以,问题是岛 - 如您所见 - 应该在按钮上方。但是当岛的 z 索引大于按钮时,按钮仍然可见,但我无法再悬停/单击它们。仿佛按钮被岛上的透明区域覆盖。

在这种情况下,建议的修复方法是什么?

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

  1. 将岛屿分成两部分(狭窄的垂直部分用于树,宽的垂直部分用于地面)。这可能更容易。

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

祝你好运!

你确定它不起作用吗?这是一个小提琴效果很好。你position:absolute了吗?在这种情况下,正如您所说,您的岛屿图层必须有一个更大的div 来隐藏按钮div。

既然它们是图像,为什么不将它们切开一点并将它们排列在一起,这样div 就不会相互交叉,这是一个原始的想法......

最新更新