background-size:封面在android本机浏览器中不起作用

时间:2013-12-08 09:41:09

标签: android css css3 background

我正在尝试使用background-size:cover将背景图片放到容器中。 这是我的小提琴:The Fiddle

它适用于所有浏览器但不适用于Android原生浏览器.. 有人有任何解决方案吗?感谢

3 个答案:

答案 0 :(得分:12)

在搜索此问题并找不到解决方案后,我从CSS文件样式中删除了背景图像,并在HTML代码中使用了内联样式。解决了Android原生浏览器的问题。

我更新了小提琴,它在Android原生浏览器中工作。

The Updated Fiddle

似乎android也有解析这样的背景格式的问题:

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

我们应该将background-image与其他内容分开并使用内联,然后在css文件中单独使用每个选项,如下所示:

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

答案 1 :(得分:0)

不幸的是,旧版本的Android原生浏览器和Chrome for Android完全不支持background-size属性。我经历了艰难发现这种痛苦的痛苦。不要使用“cover”作为值,而是执行以下操作:

background-size: 100% auto;

这样做会给你与“封面”相同的水平感觉,然后自动设置图像的高度,假设图像具有内在尺寸。

如需进一步阅读,我建议您深入了解detailed writeup from Sara Soueidan

答案 2 :(得分:0)

我有同样的问题与背景大小:封面,图像适合设备的宽度,下面有白色背景,并在我使用此css设置背景颜色时修复:

background-color: #fff;

或简写:

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

你选择哪种颜色无关紧要,因为它是不可见的。

JSFIDDLE