9

这真的让我很困惑。我想让 pic.jpg 在背景中保持静态（滚动时不移动）并且它不会拉伸。

它适用于除 Android 上的 Chrome 之外的所有浏览器（即 Chrome、Safari、Firefox）（它甚至适用于 Android 原始浏览器）

body{
        background-color: transparent !important;
        background-image: url(<%= asset_path "pic.jpg" %>);

        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

适用于 Android 的 Chrome 将其呈现为 pic.jpg 在屏幕的中间位置，而不是在整个页面上，并且在滚动时不会保持静止。.

我无法在 jsfiddle 上重现它，我也尝试用我的 Android 手机对其进行调试，但似乎没有任何帮助。

这不是创建背景图像的方法吗？

4

3 回答 3

5

我有类似的问题..我用这个解决它

html{
 height:100%;
 min-height:100%;
}
body{
 min-height:100%;
}
于 2014-03-26T19:37:38.707 回答
5

我不想残忍，但这个问题大约在 4 年前被报道过

http://code.google.com/p/android/issues/detail?id=3301

最近的回复可以帮助我猜：

在我对 Android 的实验中，我注意到身体内的所有其他 DIV 行为正确，包括居中，所以我将图像移动到另一个 DIV 并且它工作。

有趣的一个。

最好的

于 2013-02-21T18:34:51.020 回答
0

我找到了一种解决方法，可以在 Android 版 Chrome 上正确显示背景：在 html 标记中定义背景，而不是正文。这是新的CSS：

html{
    background-color: transparent !important;
    background-image: url(<%= asset_path "pic.jpg" %>);

    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

是的，这是有效的标记。以我的经验，背景在所有其他浏览器中仍然可以正常工作。

于 2013-07-17T22:24:22.217 回答