jQuery Mobile的Android的 - 固定全屏幕的背景图像？ [英] Jquery Mobile Android - Fixed full-screen background image?
问题描述
我想全屏固定的背景图像添加到第一页只针对Android jQuery的移动应用程序（我还使用PhoneGap的）。
在简单地说，我想的背景图像进行全屏和固定的，而网页内容滚动它上面。背景图像还需要扩展到不同的设备的尺寸。
下面是我迄今为止...
＆LT; DIV数据角色=页面ID =单位清单数据主题=一个＆GT;＆LT; DIV ID =背景＆GT;＆LT; DIV数据角色=头的数据主题=B＆GT;
＆LT; H1＆GT;页眉和LT; / H1＆GT;
＆LT; / DIV＆GT;＆LT;！ - /头 - ＆GT;＆LT; DIV数据角色=内容的数据主题=一个＆GT; ＆LT; UL数据角色=列表视图数据主题=无＆GT;
＆LT;立GT;清单项目＆lt; /李＆GT;
＆LT;立GT;清单项目＆lt; /李＆GT;
＆LT;立GT;清单项目＆lt; /李＆GT;
＆LT; / UL＆GT;＆LT; / DIV＆GT;＆LT;！ - /内容 - ＆GT;＆LT; / DIV＆GT;＆LT;！ - /背景 - ＆GT; ＆LT; / DIV＆GT; ＆LT;！ - /页 - ＆GT;
有了这个CSS：
#background {
背景：网址（../图像/ background.png）;
宽度：100％重要;！
！高度：汽车重要的;
背景重复：不重复;
位置：绝对的;
的z-index：-1;
}
这显然不提前工作方向是正确的，所以任何的微调将是AP preciated，谢谢。
的.ui页{
背景：透明的网址（http://www.nasa.gov/images/content/312934main_image_1283-946.jpg）0 0不重复的固定很重要;
背景大小：盖;
}
这个改变从默认的渐变背景图片到你选择的图片。背景图像被施加到的.ui页元件（伪页），覆盖了整个页，并且被固定，因此不会与页滚动。
下面是一个演示： http://jsfiddle.net/kKv4s/
文件：
-
背景大小：<一href=\"https://developer.mozilla.org/en/CSS/background-size\">https://developer.mozilla.org/en/CSS/background-size -
背景附件：<一href=\"https://developer.mozilla.org/en/CSS/background-attachment\">https://developer.mozilla.org/en/CSS/background-attachment
下面是背景大小浏览器的支持：<一href=\"http://caniuse.com/#feat=background-img-opts\">http://caniuse.com/#feat=background-img-opts
更新
您可能希望创建为的.ui含量元素（S）你的CSS规则，而不是的.ui页元素（S）为梯度背景的的.ui含量元素可以重叠，我们要添加到的背景。 UI页元素：
的.ui内容{
背景：透明的网址（http://www.nasa.gov/images/content/312934main_image_1283-946.jpg）0 0不重复的固定很重要;
背景大小：盖;
}
下面是一个演示： http://jsfiddle.net/kKv4s/1/
I'm trying to add a full screen fixed background image to the first page only of a jquery mobile app for Android (I'm also using phonegap).
In a nutshell, I would like the background image to be fullscreen and fixed, while the page content scrolls above it. The background image also needs to scale to the size of different devices.
Here is what I have so far...
<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 -->
With this CSS:
#background {
background: url(../images/background.png);
width: 100% !important;
height: auto !important;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
This obviously doesn't work so any nudge in the right direction would be appreciated, thanks in advance.
.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;
}
This changes the background image from the default gradient to an image of your choosing. The background image is applied to the .ui-page elements (the pseudo-pages), covers the whole page, and is fixed so it doesn't scroll with the page.
Here is a demo: http://jsfiddle.net/kKv4s/
Documentation:
background-size: https://developer.mozilla.org/en/CSS/background-sizebackground-attachment: https://developer.mozilla.org/en/CSS/background-attachment
Here is browser support for background-size: http://caniuse.com/#feat=background-img-opts
Update
You may want to create your CSS rule for the .ui-content element(s) rather than the .ui-page element(s) as the gradient-background for the .ui-content element can overlap the background we're adding to the .ui-page element:
.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;
}
Here is a demo: http://jsfiddle.net/kKv4s/1/
这篇关于jQuery Mobile的Android的 - 固定全屏幕的背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
