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>

映射元素的背景图像

1 个答案: