为什么这个CSS在Android Chrome上不能正常工作，但在其他地方都能正常工作？

Question

这真的让我感到困惑。我希望pic.jpg能够作为背景静态显示（滚动时不移动），并且它不会被拉伸。

在每个浏览器上都可以正常工作（例如Chrome，Safari，Firefox），但在Android上的Chrome上无法正常工作（甚至在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;
    }

Chrome for Android在屏幕上只显示了pic.jpg的一半，并且不能随着滚动保持静态。我无法在jsfiddle上重现此问题，我还尝试使用我的Android手机进行调试，但没有任何帮助。这难道不是创建背景图像的方式吗？

- Nick Ginanto

---

你能给我们提供这个页面的链接吗？或者至少类似的例子。 - Trouble

Answer 1

我有类似的问题..我用下面这个方法解决了

html{
 height:100%;
 min-height:100%;
}
body{
 min-height:100%;
}

- Davor Popovic

Answer 2

我不想太残酷，但这个问题大约在4年前就已经报告过了。

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

最近的回复可能有所帮助：

在我的Android实验中，我注意到所有其他DIV都在body中正确地表现，包括居中，所以我将图像移动到另一个DIV中，然后它就起作用了。

有趣的一个。

最好的

- Piotr Mąsior

---

残忍？更像是有帮助。可惜已经过去4年了，Chrome for Android仍然不支持基本功能...即使苹果也支持这个功能。 - Nick Ginanto

“even apple”，你让我开心极了 :-D 只是提醒一下，最新的Magento管理登录区域在Chrome（已测试Linux/Windows）上无法正常工作，而其他现代浏览器没有任何问题。我必须承认，Chrome是我最喜欢的浏览器，但有些错误开始让我想起了<天哪保佑我们>IE6。 - Piotr Mąsior

Answer 3

我找到了一个解决方法，可以让Chrome for Android上的背景正确显示：在html标签中定义背景，而不是body。以下是新的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;
}

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

- JC Hulce

---

在background-size属性上设置!important标志对我也起作用了。 - bricker