html - 映射元素的背景图像

Question

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

但试想一下，我有一个div带有背景图像的元素，我想将背景图像映射为<img>.

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

我怎样才能映射这个？

Answer 1

使用带有图像映射的透明图像（例如 with opacity:0），位于您的 div 上方。这个效果就是ImageMapster插件的工作原理。

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