Question

我正在使用Phonegap＆amp; amp;也使用jquery mobile。我想为data-role = page div设置背景图片。在这个页面的高度等于屏幕＆amp;因此背景设置为屏幕大小。但页面内容长度远大于屏幕和屏幕。因此在图像完成后可以看到灰色背景。我的问题是，是否有一种方法可以保持背景图像的固定和安全性。滚动或仅移动页面内容不是背景图片。我只想提一下full size background jquery pluggin。它适用于Android，但不适用于iOS。

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

Answer 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）

Answer 2

您正在寻找css background-attachment财产。

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

<强>更新
iOS 5 支持background-attachment:fixed，如果您使用的是旧版iOS，则可以考虑使用iScroll。

Answer 3

您可以将背景图像设置为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%; }

Answer 4

你可以试试这个：

 .ui-mobile
 .ui-page-active{

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

 }

对我来说很好。

Answer 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;

Answer 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

进行修复

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

6 个答案: