映射元素的背景图像

Question

我知道我们有<map>和<area>用于映射图像。 我想使用这种多边形模式。

但是，试想一下，我有一个带有背景图像的div元素，并且想要映射<img>这样的背景图像。

我的形状不是矩形或正方形； 这是一个多边形。 而且我不想使用透明的div技巧。

我该如何映射？

Answer 1

将透明图像（例如opacity:0 ）与图像映射一起使用，并将其放置在div上。 此效果就是ImageMapster插件的工作方式。

我写了一篇博客文章 ，解释了这些效果的工作原理。 总而言之，您可以在所需的任何内容之上使用HTML图像映射。 您需要做的就是确保img具有最高的z-index ，并且是透明的，并且绝对位于要最终用户实际看到的元素的顶部。 如果它是透明的，则最终用户将只看到其背后的内容，从而使您可以完全灵活地将imagemaps的多边形位置跟踪功能应用于任何其他类型的元素，例如div 。

例：

<div id="container">
    <img style="position: absolute; top: 0; left: 0; opacity: 0; 
                width: 100px; height: 100px;" 
         src="/placeholder.jpg" 
         usemap="#my-image-map">
    <div style="position: absolute; top: 0; left:0; 
                background-image: url(/some-100-by-100-pixel-image.jpg)">
</div>