在移动浏览器上CSS "background-position: bottom“不完美

Question

​

body
{
  background-color: #000000;
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  background-size: cover;
}

a
{
  color: #ffffff;
}

<a>Hello, world!</a>

​

我正在开发的一个网站有一个背景图像，它充满了视口，并锚定在底部。它在PC上运行得很好，但Android上的移动浏览器会将背景图像锚定在最后一个元素的底部，如果内容没有填满整个屏幕，就会在它下面留下一个空白。我如何解决这个问题，使背景图像正确地填满Android上的屏幕？

Answer 1

一个朋友帮我解决了这个问题。主体比视口小，留下了空白区域。我将背景属性移到了html选择器中，并添加了"height: 100%;“，如这个新的代码示例所示。

​

html
{
  background-color: #000000;
  background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  background-size: cover;
  height: 100%;
}

a
{
  color: #ffffff;
}

<a>Hello, world!</a>

​