我正在尝试为我的网站获得漂亮的全屏图像背景。它在我测试过的几乎所有浏览器 (browsershots.org) 中都运行良好,但在我的 Android 平板电脑上的 Chrome 中它没有按预期运行。如您所见,背景中有很多白色,应该是所有图像。
CSS:
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
意外结果:
最佳答案
这似乎是 Android/Chrome 团队忽略的一个已有四年之久的错误:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
我已经尝试了在这些链接和其他地方提到的所有解决方案;在 Android 4.3 Chrome 30 上都失败了。在 Android 2.3 native 浏览器上都失败了。
我要去的是:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(即 CSS 从 body
移到名为“body”的类中),然后在我的 HTML 中:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(顺便说一句,您在那里看到的将页脚保持在窗口底部的技术似乎并没有导致问题,因为在我的第一组实验中我将其删除。)
旁白:我很惊讶地看到 Firefox for Android 也无法使用 background-size:cover。他们共享相同的渲染引擎吗?!
关于背景大小 :cover leaves blank space in Chrome for Android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13720922/