Jquery Mobile Android - 修正了全屏背景图像？

Question

我正在尝试将全屏固定背景图像添加到仅用于Android的jquery移动应用程序的第一页(我也使用phonegap).

简而言之,我希望背景图像是全屏和固定的,而页面内容则在其上方滚动.背景图像还需要缩放到不同设备的大小.

这是我到目前为止所拥有的......

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

有了这个CSS:

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

这显然不起作用,所以在正确的方向上任何推动都会受到赞赏,在此先感谢.

Answer 1

.ui-page {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}?

这会将背景图像从默认渐变更改为您选择的图像.背景图像应用于.ui-page元素(伪页面),覆盖整个页面,并且是固定的,因此不会随页面滚动.

这是一个演示:http://jsfiddle.net/kKv4s/

文档:

• background-size:https://developer.mozilla.org/en/CSS/background-size
• background-attachment:https://developer.mozilla.org/en/CSS/background-attachment

以下是浏览器支持background-size:http://caniuse.com/#feat=background-img-opts

更新

您可能希望为.ui-content元素而不是.ui-page元素创建CSS规则,因为元素的渐变背景.ui-content可以与我们添加到.ui-page元素的背景重叠:

.ui-content {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}?

这是一个演示:http://jsfiddle.net/kKv4s/1/