1
我有一些關於ios(iPad/iPhone)上的Safari背景圖像的問題。在普通瀏覽器上一切正常。圖像應該是固定的並填滿屏幕。固定背景img在iPad和iPhone上無法正常工作
- 在ios-safari上顯示背景圖像並保持固定在背面。然而,圖像的高度以某種方式由內容高度設置。意思是,當頁面上的內容很少時,圖像顯示正確,但當內容較長時,我只能看到背景圖像的頂部(圖像被拉伸但保持正確的比例)。
- 用於切換背景圖像的js代碼在ios-safari上不做任何事情。
這裏是我的html
<html>
<head>
Some head stuff
</head>
<body>
<div class="pagewrap">
<header class="header">
<div class="menu">
Some header stuff
</div>
</header>
<div class="full-page-background fullheight"></div>
<div class="wrap">
<div class="main">
Some content
</div>
</div>
<aside class="sidebar">
<nav class="mobnav">
My mobile nav
</nav>
</aside>
</div>
<div class="custom-background">
A placeholder for a custom background image
</div>
</body>
</html>
這裏是。全頁面背景的CSS
.full-page-background {
background: url(/Content/Vixen/img/background02.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
width: 100%;
z-index: 1;
}
這裏是.fullheight的JS,以確保它填補了高度瀏覽器窗口。
$(document).ready(function() {
var bodyheight = window.innerHeight ? window.innerHeight:$(window).height();
$(".fullheight").height(bodyheight);
});
// for the window resize
$(window).resize(function() {
var bodyheight = window.innerHeight ? window.innerHeight:$(window).height();
$(".fullheight").height(bodyheight);
});
這裏是.custom背景js的 - 如果在div(通過放置在CMS用戶)一個圖像將其切換爲新的一個的默認圖像。在桌面上運行良好,但對ios-safari沒有任何幫助。
$(".background-image").each(function() {
imgsrc = this.src;
$('.full-page-background').css({
background:'url(' + imgsrc +') no-repeat fixed center center/cover transparent'
});
});