背景大小 :cover leaves blank space in Chrome for Android

标签 background fullscreen css cover

我正在尝试为我的网站获得漂亮的全屏图像背景。它在我测试过的几乎所有浏览器 (browsershots.org) 中都运行良好,但在我的 Android 平板电脑上的 Chrome 中它没有按预期运行。如您所见,背景中有很多白色,应该是所有图像。

链接: http://test.socie.nl

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/

相关文章:

css - 推特 Bootstrap : add media queries for xxs breakpoint

c - 需要用户输入时在后台运行多线程 C 程序

css - 固定背景图像直到页面底部

android - 如何在android Activity 中永久隐藏导航栏?

ipad - 如何在 UIPopoverController 之上制作 MPMovie Controller 全屏 View ?

html - CSS 动画移动不需要的对象

css - 什么是 CSS 颜色名称 : "background"?

jquery slider 改变 body 背景

ios - 在 iPhone 上以横向模式在 UINavigationBar 和 UITabBar 全屏之间查看

javascript - 阻止按空格键滚动 - Chrome