我正在尝试将全屏固定背景图像添加到仅适用于Android的jquery移动应用程序的第一页(我也使用phonegap). 简而言之,我希望背景图像是全屏和固定的,而页面内容则在其上方滚动.背景图
...我正在尝试将全屏固定背景图像添加到仅适用于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/
. ..