[android]不滚动内容 html5 phonegap 的整页背景图像

标签: html5 Android CSS
发布时间: 2015/6/3 20:19:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一整页背景图像与下面的代码:

<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 电话。[没有问题]
  • 但滚动时,背景图像不会出现。而是白色背景显示。[问题]
  • 原始背景重新出现只当我单击中的一些控件 view 。在我的情况下, checkbox 。[问题]

下面是屏幕

原始的全屏显示背景

Original - Full Screen

部分白色背景上滚动

White background on scroll

屏幕背景后滚动显示。请注意,不延长的原始背景。背景图像开始/重复了一遍。

enter image description here

解决方法 1:

通过使用 CSS 和 jQuery 最终解决这一问题。现在它有另一种完美。

mypage.html

<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>

全 screen.css

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%;
}

全 screen.js

$(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);
}
官方微信
官方QQ群
31647020