css – Jquery Mobile Android – 修正了全屏背景图片？

我正在尝试将全屏固定背景图像添加到仅适用于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;
}

这显然是行不通的,所以在正确的方向上任何推动都会受到赞赏,这要归功于此.

解决方法

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