如何使用Phonegap在jquery mobile for iPhone应用程序中设置固定位置背景图像答案

【问题标题】：How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap如何使用Phonegap在jquery mobile for iPhone应用程序中设置固定位置背景图像
【发布时间】：2012-01-19 09:27:17
【问题描述】：

我正在使用 Phonegap 和 jquery mobile 做一个 iPhone 应用程序。我想为 data-role=page div 设置背景图片。在此页面高度等于屏幕，因此背景设置为屏幕大小。但是页面内容长度比屏幕长得多，因此在图像完成后会看到灰色背景。我的问题是是否有办法让我们可以保持背景图像固定并滚动或仅移动页面内容而不移动背景图像。顺便提一下我试过full size background jquery pluggin。它适用于 Android，但不适用于 iOS。

有人可以帮忙吗？提前致谢。

【问题讨论】：

标签： iphone jquery-mobile cordova background-image fixed

【解决方案1】：

好的，所以我所做的是在页面的 body 元素中创建一个固定元素。所以它看起来像

<body>
   <div id="background"></div>
    ...
</body>

对于 CSS，我声明如下：

    #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

这对我有用。希望它有所帮助（有人在那里：P）

【讨论】：

【解决方案2】：

您正在寻找css background-attachment 属性。

div[data-role="page"]{
  background-attachment: fixed;
}

更新：
iOS 5 支持background-attachment:fixed，如果您使用旧版本的 iOS，您可以考虑使用iScroll。

【讨论】：

从iOS5开始运行，如果你使用的是旧版本的iOS WebKit版本，Safari不支持background-attachment:fixed
JuicyScripter 解释说，固定位置仅适用于 iOS5+，只有使用 iScroll 之类的库才能在 iOS4 及更低版本上产生相同的效果。

【解决方案3】：

你可以试试这个：

 .ui-mobile
 .ui-page-active{

 display:block;
 overflow:visible;
 overflow-x:hidden;

 }

对我来说很好。

【讨论】：

【解决方案4】：

您可以将背景图片设置为 jQuery 页面：

.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }

【讨论】：

【解决方案5】：

试试这个，这对我有用。

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0  fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;

【讨论】：

【解决方案6】：

<body>
   <div id="background"></div>
    ...
</body>

css:

#background {
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    #background {
        background-attachment: initial !important;
    }
}

问题是iOS移动设备同时渲染background-size:cover;和background-attachment:fixed;有错误，所以你必须通过@media修复它

【讨论】：