html - 映射元素的背景图像

Question

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

但想象一下我有一个 div具有背景图像的元素，我想映射背景图像，如 <img> .

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

我怎样才能映射这个？

Answer 1

使用带有图像映射的透明图像(例如，使用 opacity:0)，将其放置在 div 上。这个效果是怎么样的ImageMapster插件有效。

我写了一个blog post这解释了这些效果是如何发挥作用的。总而言之，您可以在任何您想要的内容之上使用 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>