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