Jquery Mobile Android - 修复了全屏背景图像? [英] Jquery Mobile Android - Fixed full-screen background image?

问题描述

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

简而言之，我希望背景图像是全屏和固定的，而页面内容在其上方滚动.背景图片也需要根据不同设备的大小进行缩放.

这是我目前所拥有的...

<div id="背景"><div data-role="header" data-theme="b"><h1>标题</h1></div><!--/header --><div data-role="content" data-theme="a"><ul data-role="listview" data-theme="none"><li>列表项</li><li>列表项</li><li>列表项</li></div><!--/content --></div><!--/background -->
<!--/page -->

使用此 CSS:

#background {背景: url(../images/background.png);宽度:100%！重要；高度:自动！重要；背景重复:不重复；位置:绝对；z-索引:-1；}

这显然行不通，因此在正确方向上的任何推动将不胜感激，提前致谢.

解决方案

.ui-page {背景:透明网址(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg)0 0 无重复固定！重要；背景尺寸:封面；}

这会将背景图像从默认渐变更改为您选择的图像.背景图像应用于 .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 {背景:透明网址(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-size
• background-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屋！