在安卓原生浏览器中，背景大小为cover的属性无法正常工作。

Question

我正在尝试使用background-size:cover将背景图适应其容器。 这是我的示例：示例链接 它在所有浏览器中都能工作，但在Android原生浏览器中无法工作。 请问有人有解决方案吗？谢谢。

- Payam Shakibafar

---

可能是因为你需要将宽度设置为像素而不是百分比，这只是一个猜测，因为如果我记得正确，安卓在屏幕宽度设置方面存在问题。 - Szymon

你的意思是所有元素都应该使用px而不是%吗？ - Payam Shakibafar

Answer 1

在搜索了这个问题并找不到解决方案后，我从CSS文件样式中删除了background-image，并在HTML代码中使用了内联样式。安卓原生浏览器的问题已经解决。

我更新了这个示例，并且它在安卓原生浏览器中可以工作。 更新后的示例 看起来安卓也存在无法解析这种格式的背景的问题：

background: url('...') fixed center center / cover;

我们应该将背景图片与其他内容分开，并将其内联使用，然后在 css 文件中单独使用每个选项，如下所示：

background-size: cover;
background-position: center center;

- Payam Shakibafar

---

@R.Bosma很贴心地提出了一个建议（尽管这个答案可能会被删除，因为它的内容更适合作为评论）：“不要使用background-attachment: fixed。否则，在Android设备上也不会应用缩放。本地和滚动似乎工作得很好。” - Charles Duffy

当使用 html, body {...} 而不是 body {...} 时，它可以正常工作。 - Edward

Answer 2

不幸的是，旧版Android原生浏览器和Chrome for Android并不完全支持background-size属性。 我已经通过艰苦的方式发现了这一点。 请不要使用“cover”作为值，而应该执行以下操作：

background-size: 100% auto;

它的作用是让你获得与"cover"相同的水平感觉，然后自动设置图像的高度，假设该图像具有固有尺寸。

如需进一步阅读，我建议深入阅读Sara Soueidan的详细撰写。

- yonas

Answer 3

我曾经遇到过background-size: cover的相同问题，图片适应设备宽度而下方出现白色背景，在使用以下CSS设置background-color后问题得以解决：

background-color: #fff;

或者简写为：

background: #fff url('http://cdn.stupiddope.com/wp-content/uploads/2013/06/IMGP3540.jpg') no-repeat scroll center center / cover;

无论你选择哪种颜色，都无所谓，因为它将是看不见的。

JSFIDDLE

- jcubic