【问题标题】: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。

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

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

【问题讨论】:

标签: 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 插件。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-04-11
    • 1970-01-01
    • 2011-03-15
    • 2011-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多