2

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

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

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

4

1 回答 1

0

像这样的东西应该工作：

<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 插件。

于 2013-09-07T01:25:27.740 回答