Question

由于这个话题，我最近了解了background-size属性

正如你猜测的那样，我正在尝试让背景图像占据整个屏幕，而不是更多/不少。这是我的小提琴

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";

以下是contain属性的作用

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域

图像的大小并不重要。如果它更小，则应缩放到屏幕的完整大小。如果它更大，则应按比例缩小。

在小提琴中，您可以看到图像水平重复5次，垂直重复5 1/2次。

我已尝试过100% 100%，当宽度拉伸到全屏时，它仍会在垂直方向上显示相同的图像5 1/2倍

我无法解释这种行为。有没有人有任何想法？

Answer 1

两件事：

背景重复
身体的宽度和高度

正如an edited fiddle中所述，问题是background-repeat的默认值为repeat。因此，图像将重复而不是拉伸。但是，这并不能解决所有问题，因为正文和HTML元素的宽度定义为100％。

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
document.body.style.backgroundRepeat = "no-repeat";

如果您想要覆盖整个屏幕，请使用cover而不是包含。封面确保元素完全被覆盖，而包含只需确保最大限度地包含背景图像（这可能会导致空白）。

Answer 2

这可能会有所帮助：

position: fixed;
background-position: center;
overflow-x: hidden;
width: 100%;
height: 100%;
background: url(img/xxx.jpg);
background-size: 100%;
background-attachment: fixed;
overflow-y: scroll;

使用背景大小CSS3

2 个答案: