<body>
<div id=wrap>
<div class="map">
<div class=A1><a href="#">1<span class=C1>return of</span></a></div>
<div class=A2><a href="#">2<span class=C2>the king</span></a></div>
</div>
</div>
</body>
/*wrap是底层.map是背景图,A1,A2是定位在map里面的小div*/*
{
font-size: 12px;
margin: 0;
padding: 0;
}
#wrap
{
margin: 0 auto;
}
.map
{
position: relative;
float: left;
background: url(../images/ROTK.jpg) no-repeat;
-webkit-background-size: cover;
-webkit-background-size: 100% 100%;
background-size: cover;
background-size: 100% 100%;
}
a{
position: absolute;
width: 20px;
height: 20px;
border: 3px solid #fff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
background-color: #ff8000;
}
.A1 a:link
{
margin: 16.6% 0 0 4.78%;
}
.A2 a:link
{
margin: 5.7% 0 0 20.2%;
}
.A3 a:link
{
margin: 12.2% 0 0 17.8%;
}这是样式.用百分比定的位$(window).load(function() {
$('#wrap').height($(window).height());
$('#wrap').width($(window).width());
$('.map').height($(window).height());
$('.map').width($(window).width());
});这是js...效果是通过js获取当前页面高度和宽度,让图片充满浏览器.但是发现当浏览器地址栏下面有书签栏之类的东西会把背景map的图片高度压缩,导致内部定位的div A1,A2等相对于图片向下偏移请观察下图"love""左边字上面的圆点位置,没有书签时在字的上方,出现书签时位置偏下盖住了字尝试过写成像素px来定位一样会往下.也试了试新见到的 transform: translate属性还是一样我试着用offset..不过jQuery没有取到值还是怎么回事,背景图空白了.而且小div位置还是会变请问如何解决,谢谢
- 1 回答
- 0 关注
- 2270 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消