问题描述
我正在使用 Phonegap & 做一个 iPhone 应用程序也使用jquery mobile.我想为 data-role=page div 设置背景图像.在这个页面的高度等于屏幕 &因此背景设置为屏幕大小.但是页面内容长度远大于screen &因此图像完成后会看到灰色背景.我的问题是是否有办法让我们可以保持背景图像固定&仅滚动或移动页面内容不是背景图片.顺便提一下，我尝试过 全尺寸背景 jquery 插件.它适用于 Android，但不适用于 iOS.
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes. My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image. Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
有人可以帮忙吗?提前致谢.
Can anyone please help? Thanks in advance.
推荐答案
好的，所以我所做的是在页面的 body 元素中创建一个固定元素.所以它看起来像
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>
对于 CSS，我声明如下:
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;
}
这对我有用.希望它有所帮助(有人在那里:P)
And this did the trick for me. Hopefully it helps (someone out there :P)
这篇关于如何使用Phonegap在iPhone应用程序的jquery mobile中设置固定位置背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！