Android 全屏背景图像不随内容滚动html5 phonegap
我有一张完整的背景图片,上面有以下代码:Android 全屏背景图像不随内容滚动html5 phonegap,android,css,html,cordova,jquery-mobile,Android,Css,Html,Cordova,Jquery Mobile,我有一张完整的背景图片,上面有以下代码: <html class="full" lang="en"> <body class="full" > header, footer and content.... Extending beyond the initial view. </body> </html> <style> .full { background: tra
<html class="full" lang="en">
<body class="full" >
header, footer and content.... Extending beyond the initial view.
</body>
</html>
<style>
.full {
background: transparent url(../img/blur-background.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
我的问题描述是
最初,在android手机中呈现全屏背景图像。[没问题]
但当我滚动时,背景图像不会出现。而是显示白色背景。[问题]
只有单击视图中的某个控件时,原始背景才会重新显示。在我的例子中,复选框。[问题]
下面是屏幕
原版-全屏背景
卷轴上的部分白色背景
滚动后出现的屏幕背景。请注意,原始背景没有扩展。背景图像再次开始/重复
我会选择一个明确的div作为你的背景,例如:
<html>
<body>
<div id="homeScreenBG"></div>
<div id="restOfPage">
header, footer and content.... Extending beyond the initial view.
</div>
</body>
</html>
#homeScreenBG {
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-image: transparent url(../img/blur-background.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover;
}
最后使用CSS和jQuery解决了这个问题。现在它工作得很好 mypage.html 全屏.js
<link rel="stylesheet" type="text/css" href="css/full-screen.css" />
<script type="text/javascript" src="js/full-screen.js"></script>
<div data-role="page" data-cache="false">
<div data-role="header">
</div>
<div class="ui-content" data-role="content">
<!-- All content here....... Scrollable content here.... -->
</div>
<div data-role="footer">
</div>
</div>
body {
margin-top: 50px;
margin-bottom: 50px;
background: none;
background-attachment:fixed;
border: 0px;
}
.ui-page {
background-color: #373737 !important; /*Any color based on the data-theme selected*/
}
.ui-content {
background: transparent url(../img/blur-background.jpg);
background-size : 100% 100%;
}
$(document).on("pageshow", function(){
SizeContent();
});
$(window).on("resize orientationchange", function(){
SizeContent();
});
function SizeContent(){
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);
}