Question

＆＃13;

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;
}

＆＃13;

<a>Hello, world!</a>

＆＃13;

我正在开发的网站有一个填充视口的背景图像，并固定在底部。它在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>

CSS＆＃34;背景位置：底部＆＃34;移动浏览器不完美

1 个答案: