映射元素的背景图像答案

【问题标题】：Mapping background-image of element映射元素的背景图像
【发布时间】：2013-04-14 11:02:47
【问题描述】：

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

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

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

我怎样才能映射这个？

【问题讨论】：

你有一些代码吗？它总是有助于理解你的问题。你的问题到底是什么。您可以将地图与 div 一起使用吗？它有效吗？什么没有按预期工作？

标签： html css imagemap

【解决方案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>

【讨论】：