透明图片在JavaScript中点击

Question

我正在尝试制作一款主要使用DOM Elements的游戏。现在我有一个问题。 DOM元素通常是矩形。问题是，如果我有一个透明部分的图像覆盖另一个图像，如果你碰到覆盖的透明部分，则不会点击底部图像。

我为这个问题搜索了一些jQuery插件，发现了一些：

1. http://forum.jquery.com/topic/parrythrust-1-0-0-transparent-image-clickthrough
2. http://plugins.jquery.com/pixelselect/

这里的问题是，第一个插件只检测点击事件。 另一个更有希望，因为它可以检测鼠标悬停，鼠标移动，点击等等，但它似乎根本不起作用。

这个问题还有其他解决方案吗？图像映射不是解决方案，因为我认为它们不能处理具有不同z索引的覆盖内容。

Answer 1

如何使用CSS Shapes？

您可以为元素定义自己的周长。圈子非常简单。

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

根据该文章，请注意，目前只有Chrome 37+支持它。