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

发布于 2024-12-27 14:29:22 字数 381 浏览 2 评论 0原文

我正在使用 Phonegap 制作一个 iPhone 应用程序；还使用 jquery 移动。我想为 data-role=page div 设置背景图像。在这个页面的高度等于屏幕&因此背景设置为屏幕大小。但页面内容长度远大于屏幕&因此，图像完成后会看到灰色背景。我的问题是是否有一种方法可以让我们保持背景图像固定并保持不变。仅滚动或移动页面和内容的内容不是背景图像。只是提一下，我尝试过全尺寸背景 jquery 插件。它可以在 Android 上运行，但不能在 iOS 上运行。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感悟人生的甜 2025-01-03 14:29:22

好的，所以我所做的是在页面的 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）

Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like

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

And for the CSS I stated the following:

    #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;
}

And this did the trick for me. Hopefully it helps (someone out there :P)

回复收藏 0 原文

盛夏尉蓝 2025-01-03 14:29:22

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

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

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

You looking for css background-attachment property.

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

Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.

回复收藏 0 原文

云之铃。 2025-01-03 14:29:22

你可以试试这个：

 .ui-mobile
 .ui-page-active{

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

 }

对我来说效果很好。

you can try this:

 .ui-mobile
 .ui-page-active{

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

 }

works fine for me.

回复收藏 0 原文

旧故 2025-01-03 14:29:22

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

You can set your background image to the jQuery page:

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

回复收藏 0 原文

‖放下 2025-01-03 14:29:22

尝试一下，这对我有用。

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;

Try with this, this work for me.

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;

回复收藏 0 原文

眼眸里的快感 2025-01-03 14:29:22

<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; 时出现错误，因此您必须通过 修复它@媒体

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

The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by @media

回复收藏 0 原文

~没有更多了~