使用背景大小时非常奇怪的行为 CSS3

Question

我最近了解了 background-size 属性感谢这个话题

Set size on background image with CSS?

正如您所猜到的，我正试图让背景图片占据整个屏幕而不是 more/no。这是我的 fiddle

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

这是 contain 属性的作用

Scale the image to the largest size such that both its width and its height can fit inside the content area

图像的大小无关紧要。如果它更小，它应该缩放到屏幕的全尺寸。如果较大，则应按比例缩小。

在fiddle中，可以看到图像水平重复了5次，垂直重复了5 1/2次。

我试过100% 100%，虽然宽度拉伸了整个屏幕，但它仍然在垂直方向上显示相同的图像 5 1/2 倍

我无法解释这种行为。有人有什么想法吗？

Answer 1

这可能有帮助：

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;

Answer 2

两件事：

背景重复
正文的宽度和高度

正如您在 an edited fiddle 中所做的那样，问题是 background-repeat 的默认值是 repeat。因此，图像将被重复而不是被拉伸。但是，这并不能解决所有问题，因为 body 和 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 而不是包含。 Cover 确保元素被完全覆盖，而 contain 只是确保背景图像被最大程度地包含（这可能导致白色 space）。

使用背景大小时非常奇怪的行为 CSS3

Very weird behavior when working with background size CSS3

html

javascript

css

background-image

background-size