11

我正在尝试为我的网站获得一个不错的全屏图像背景。它在我测试过的几乎所有浏览器（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;
}

意外结果：

4

5 回答 5

3

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 本机浏览器上都失败了。

我要去的是：

.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 上也表现不佳。他们是否共享相同的渲染引擎？！

于 2013-11-08T10:41:16.270 回答
2

上面发布的方法有更新（如在此处发布）。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

尽管尽管进行了更新，但原始问题中的问题仍然存在。除了上述内容之外，对我有用的是向 html CSS 添加完整的宽度和高度：

html {
    width: 100%;
    height: 100%
}
于 2014-10-25T18:25:00.307 回答
1

通过添加以下内容解决：

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

body {
   min-height:100%;
}
于 2015-02-01T16:06:54.817 回答
0

而不是背景图像，请尝试使用<img>：

HTML：

<img src="imagepath" id="your-id" />

CSS：

#your-id{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
于 2012-12-05T10:39:17.363 回答
0

实际上，如果您使用 html 标记要添加，我只需要：

height: 100%;

...需要注意的是，当您将菜单栏滚动到视野之外时，图像仍然会调整大小，但我认为所有其他答案也存在这个问题。

于 2016-07-12T10:46:46.990 回答