0

我有一个基于 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 浏览器上，滚动开始后，背景会像这样粘在页面顶部：

在滚动页面

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

O 点击一个元素

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

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

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

这些问题只发生在 ICS 原生浏览器上。

如果我做错了什么，请告诉我。有没有一个纯 CSS 解决方案？（显然有些事情是非常错误的）

4

2 回答 2

0

试试这个：

body.ui-mobile-viewport .ui-page
{
 background: url('images/bg-texture.jpg') no-repeat fixed left bottom; 
 background-size: cover;
}
于 2012-11-05T09:58:55.177 回答
0

以下用于“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;
    }

希望有帮助。

于 2015-08-08T09:32:35.273 回答