进步CSS3背景+影像地图

我想一个渐进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.

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

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

来源

2013-05-27 user2426320

这是你以后的事情吗？ http://www.position-relative.com/tutorials/tute1_css_bg_image.php ...或者你需要多边形地图吗？ – Whistletoe

另请参阅：http://stackoverflow.com/questions/7594479/how-using-usemap-in-div-background-url – Whistletoe

感谢您提供的链接。唯一的问题是，它似乎没有使用渐进的CSS3背景。 – user2426320

像这样的东西应该工作：

<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％;对于背景大小：封面，您可能需要尝试一些可以复制此行为的JQuery插件。

来源

2013-09-07 01:25:27 daviestar

进步CSS3背景+影像地图

回答

相关问题