Image 进步CSS3背景+；影像地图

我想结合渐进式CSS3背景

html { 
background: url(background.jpg) no-repeat center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

使用图像映射

<map id="imgmap" name="imgmap"><area shape="poly" alt="1" title="1" coords="1" href="1"  target="_blank" /><area shape="poly" alt="2" title="2" coords="2" href="2" target="_blank" /> </map>

请注意，我用数字1和2替换了实际数据

但我真的不知道如何实现这样一件事

任何帮助都将不胜感激，

---

谢谢。

像这样的方法应该可以：

<div class="scaling-bg">
    <a id="area1" href="#">Test link 1</a>
    <a id="area2" href="#">Test link 2</a>
    <a id="area3" href="#">Test link 3</a>
    <a id="area4" href="#">Test link 4</a>
</div>

您可以看到，我正在使用所有宽度和高度的百分比值。这是使可单击区域与背景一起缩放的关键

---

不过，您可能会遇到一些小错误，这将非常适合背景大小：100%100%；对于backgroundsize:cover，您可能想尝试一些可以复制这种行为的JQuery插件。

您想要的是这样的东西吗。。。或者您需要多边形贴图吗？另请参见：感谢提供的链接。唯一的问题是，它似乎不适用于渐进式CSS3背景。渐进式CSS3背景示例：什么不起作用？第一个链接使用css定位来放置透明链接区域。这应该是直截了当的。在您的示例链接中，只有背景。

html, body {
    height: 100%;
}
.scaling-bg {
    position: relative
    height: 100%;
    background: url(--img url--) no-repeat;
    background-size: cover;
}
.scaling-bg a {
    position: absolute;
    width: 10%;
    height: 10%;
    border: 1px solid red;
    text-indent: -9999px;
    overflow: hidden;
}
#area1 { top: 10%; left: 10%; }
#area2 { top: 20%; left: 20%; }
#area3 { top: 30%; left: 30%; }
#area4 { top: 40%; left: 40%; }