<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 關注
- 2359 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消