使用背景尺寸 CSS3 时非常奇怪的行为答案

【问题标题】：Very weird behavior when working with background size CSS3使用背景尺寸 CSS3 时非常奇怪的行为
【发布时间】：2016-06-24 19:25:11
【问题描述】：

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

Set size on background image with CSS?

如您所料，我正在尝试让背景图片占据整个屏幕，不多也不少。这是我的小提琴

https://jsfiddle.net/1x7ytdaa/

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

这是contain 属性的作用

将图像缩放到最大尺寸，使其宽度和高度都可以容纳在内容区域内

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

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

我试过100% 100%，虽然宽度拉伸了全屏，但它仍然垂直显示相同的图像 5 1/2 倍

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

【问题讨论】：

您是否尝试添加background-repeat: no-repeat？
是的，这似乎是最重要的问题。还需要将body的宽高设置为100%

标签： javascript html css background-image background-size

【解决方案1】：

两件事：

后台重复
主体的宽度和高度

正如您在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 确保元素被完全覆盖，而 contains 只是确保最大程度地包含背景图像（这可能会导致空白）。

【讨论】：

【解决方案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;

【讨论】：