Question

我想结合渐进式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替换了实际数据。

但我真的不知道如何实现这样的目标。

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

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

渐进式CSS3背景+图像映射

1 个答案: