位置：固定不适用于 ICS（本机浏览器）中的背景图像答案

【问题标题】：position:fixed doesnt work for background image in ICS (native browser)位置：固定不适用于 ICS（本机浏览器）中的背景图像
【发布时间】：2012-11-03 17:57:55
【问题描述】：

我有一个基于 jQM 的移动 Web 应用程序。我有一个应用了以下样式的背景图片：

body.ui-mobile-viewport .ui-page
{
    background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
     background-size: cover;
}

问题是，这在 iOS、Android 版 Chrome 上运行良好，但在 ICS 原生浏览器和 Dolphin 浏览器上，滚动开始后背景会像这样粘在页面顶部：

在一些动作之后，（比如点击一个元素，背景会像这样重新聚焦：

我在互联网上查了一下，做了广泛的研究，但显然我错过了一些东西。这些是我尝试过的解决方案的链接：

您在顶部看到的（我的意思是 CSS）是应用的默认未编辑样式。

注意： 我也尝试过supersized plugin，它适用于 GingerBread 设备以及页面中的内容是静态的。在 ICS 设备上，如果将其应用于具有动态内容的页面，我将无法滚动到视口之外。当我尝试在页面正文中创建img 标记并将src 设置为图像所在的路径时，也会发生同样的问题。

这些问题只出现在 ICS 原生浏览器中。

如果我做错了什么，请告诉我。有没有一个纯 CSS 解决方案？（显然有些地方大错特错）

【问题讨论】：

标签： html css jquery-mobile

【解决方案1】：

试试这个：

body.ui-mobile-viewport .ui-page
{
 background: url('images/bg-texture.jpg') no-repeat fixed left bottom; 
 background-size: cover;
}

【讨论】：

这不起作用。这基本上是问题中的内容，对吗？还是我错过了什么？

【解决方案2】：

以下用于“html”的 CSS 解决了我在 Android 设备上使用整页背景图片的问题：

html{
    height:100%;
    width:100%
}

body{
    background-image:url(img/background.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    }

希望对您有所帮助。

【讨论】：