渐进式 CSS3 背景 + 图像映射答案

【问题标题】：Progressive CSS3 Background + image map渐进式 CSS3 背景 + 图像映射
【发布时间】：2013-05-22 17:58:44
【问题描述】：

我想结合一个渐进式 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。

但我真的不知道如何实现这样的事情。

任何帮助将不胜感激，谢谢。

【问题讨论】：

你追求的是这样的东西吗？ position-relative.com/tutorials/tute1_css_bg_image.php ...或者你需要多边形地图吗？
另见：stackoverflow.com/questions/7594479/…
感谢您提供的链接。唯一的问题是它似乎不适用于渐进式 CSS3 背景。
渐进式 CSS3 背景示例：link
什么不起作用？第一个链接使用 css-positioning 来放置透明链接区域。那应该是直截了当的。在您的示例链接中，只有背景。

标签： image css dictionary background

【解决方案1】：

这样的事情应该可以工作：

<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>

对于 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%; }

您可以看到我对所有宽度和高度都使用了百分比值。这是使可点击区域随背景缩放的关键。

不过，您可能会遇到一些小错误，这对于 background-size: 100% 100%; 之类的东西非常有效。对于 background-size:cover，您可能想尝试一些可以复制此行为的 JQuery 插件。

【讨论】：