我的问题是关于 html 标签上的 background-size CSS 属性。
为什么以下不起作用，
html {
background: url(bg.jpg) no-repeat;
background-size: 1500px 1500px;
}
虽然这有效，
html {
background: url(bg.jpg) no-repeat;
height: 1500px;
}
最佳答案
它们是两个完全不同的东西:background-size 表示放置在元素上的背景图像的大小，而元素本身可以有不同的尺寸(高度为 0 会隐藏它，所以没有显示背景)。 height正好相反，它指定了元素的高度，跟你放上去的背景大小没有关系。
请看这里的三个例子(两个是我上面描述的，一个代表正确的方式):
html {
background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat right top;
background-size: 200px 200px;
}
div {
background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat;
display: inline-block;
width: 100px;
border: 1px solid black;
}
#a {
height: 0;
background-size: 100px 100px;
}
#b {
height: 100px;
background-size: auto;
}
#c {
height: 100px;
background-size: 100px 100px;
}<html>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</body>
</html>此外，我已将背景(和大小)添加到 html 元素本身，如您所见，它的行为方式相同(马里奥缩小到 200x200 没有问题)。
在这里阅读更多:
The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.
The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.
关于html - html 标签上的背景大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29354642/