CSS Jquery Mobile Android - 修复了全屏背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9880661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Mobile Android - Fixed full-screen background image?
提问by SilentDesigns
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).
我正在尝试将全屏固定背景图像添加到仅适用于 Android 的 jquery 移动应用程序的第一页（我也在使用 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:
使用这个 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.
这显然不起作用，因此在正确方向上的任何推动将不胜感激，提前致谢。
回答by Jasper
.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-pageelements (the pseudo-pages), covers the whole page, and is fixed so it doesn't scroll with the page.
这会将背景图像从默认渐变更改为您选择的图像。背景图像应用于.ui-page元素（伪页面），覆盖整个页面，并且是固定的，因此它不会随页面滚动。
Here is a demo: http://jsfiddle.net/kKv4s/
这是一个演示：http: //jsfiddle.net/kKv4s/
Documentation:
文档：
background-size: https://developer.mozilla.org/en/CSS/background-sizebackground-attachment: https://developer.mozilla.org/en/CSS/background-attachment
background-size: https://developer.mozilla.org/en/CSS/background-sizebackground-attachment: https://developer.mozilla.org/en/CSS/background-attachment
Here is browser support for background-size: http://caniuse.com/#feat=background-img-opts
这是浏览器支持background-size：http: //caniuse.com/#feat=background-img-opts
Update
更新
You may want to create your CSS rule for the .ui-contentelement(s) rather than the .ui-pageelement(s) as the gradient-background for the .ui-contentelement can overlap the background we're adding to the .ui-pageelement:
您可能希望为.ui-content元素而不是.ui-page元素创建 CSS 规则，因为元素的渐变背景.ui-content可以与我们添加到.ui-page元素的背景重叠：
.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/
这是一个演示：http: //jsfiddle.net/kKv4s/1/
回答by josh.fabean
There is a jQuery plugin that makes fullscreen backgrounds for your website.
有一个 jQuery 插件可以为您的网站制作全屏背景。
http://www.buildinternet.com/project/supersized/
http://www.buildinternet.com/project/supersized/
This option may work better for you than CSS because it using javascript to figure out what size the window is and scales the picture to fit it without stretching and distorting your image.
此选项可能比 CSS 更适合您，因为它使用 javascript 来确定窗口的大小并缩放图片以适应它，而不会拉伸和扭曲您的图像。
It also seems to have pretty good documentation on how to use it properly.
它似乎也有关于如何正确使用它的很好的文档。
回答by Praveena
This Should Work.
这应该有效。
#background {
background-image: url('grey.png');
background-position:center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
}
Html:---
<body>
<img id="background" />
If u get further problem please share
如果你有进一步的问题，请分享
回答by user2680965
This issue only appears when you try and use a repeating background image and also set it to fixed. apparently the bug in Android Chrome is in processing these two instructions together. So the fix is to use a non repeating background image and it will fix properly
此问题仅在您尝试使用重复背景图像并将其设置为固定时才会出现。显然，Android Chrome 中的错误是将这两条指令一起处理。所以修复是使用非重复的背景图像，它会正确修复
