映射元素的背景圖像

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>