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

问题描述

我尝试在Android的jQuery移动应用（我也使用phonegap）的第一页上添加全屏固定的背景图片。

简而言之，我想要的背景图片是全屏和固定的，而页面内容滚动它上面。背景图片还需要缩放到不同设备的大小。

这是我到目前为止...

 < div data-role =pageid =unit-listdata-theme =a> 
 
< div id =background> 
 
< div data-role =headerdata-theme =b> 
< h1>标题< / h1> 
< / div><！ -  / header  - > 
 
< div data-role =contentdata-theme =a> 
 
< ul data-role =listviewdata-theme =none> 
< li>列表项< / li> 
< li>列表项< / li> 
< li>列表项< / 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：
透明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 元素创建CSS规则， .ui-content 元素的渐变背景可以与背景重叠，因此我们可以使用c $ c> .ui-page 添加到 .ui-page 元素：

  .ui-内容{
 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/

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屋！