* {
margin:0;
padding:0;
}
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: contain;
}<html>
<body>
</body>
</html>在本例中，当背景大小设置为"包含"时，不会显示背景图像。
请注意，我知道如果我将主体的填充设置为10px或20px，背景图像将显示填充的大小。我不明白为什么？
* {
margin:0;
padding:0;
}
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
}<html>
<body>
</body>
</html>在本例中，背景大小设置为"覆盖"，并显示整个图像。如果没有定义高度，为什么"包含"不起作用，为什么它与填充一起起作用，以及为什么尽管没有定义高度但它对"覆盖"起作用？
原因是在这两种情况下，html元素(和主体(的高度都等于0，宽度都等于屏幕宽度。
包容总是考虑最小的尺寸，而覆盖总是考虑最大的尺寸。
让我们举一个经典元素的例子来看看发生了什么：
.box {
height: 5px;
border: 1px solid;
margin:5px; background:url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg) center no-repeat
}<div class="box" style="background-size:contain"></div>
<div class="box" style="background-size:cover"></div>我取了一个高度很小的div，当使用contain时，您可以清楚地看到图像是多么的小，但使用cover时，图像将覆盖所有宽度。现在假设我们使高度等于0。在这两种情况下，从逻辑上讲，我们只能想象背景的行为。有了包含，大小将是0，但没有覆盖，所有的技巧都在这里。
除了上面的观察，你还有背景传播技巧：
对于根元素是HTML HTML元素或XHTML HTML元素[HTML]的文档：如果根元素上背景图像的计算值为零，并且其背景颜色是透明的，则用户代理必须从该元素的第一个HTML BODY或XHTML BODY子元素传播背景属性的计算值。BODY元素背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定的值。建议HTML文档的作者为BODY元素而不是HTML元素指定画布背景。
所有的技巧都在于"；被当作它们是在根元素"上指定的一样对待；。换句话说，您的背景应用于html(0高和全宽(，在这种情况下，背景的大小为0，因此我们在传播后看不到任何东西，但在覆盖的情况下，后台的大小与0不同，我们看到了一些东西。
如果你以cover为例，将0应用于宽度，你将看不到任何东西：
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
margin:0;
}
html {
width: 0px;
}稍微增加宽度，背景将开始显示
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: cover;
margin: 0;
}
html {
width: 5px;
}宽度等于5px的小图像的重复图案。如果您增加第一个示例的高度，则包含的逻辑相同
body {
background-image: url(https://media.architecturaldigest.com/photos/5da74823d599ec0008227ea8/16:9/w_2560%2Cc_limit/GettyImages-946087016.jpg);
background-size: contain;
margin: 0;
}
html {
height: 5px;
}查看类似行为但具有梯度的相关问题：如何删除使用线性梯度属性时出现的条纹
你的填充问题现在变得微不足道了。添加填充将增加html元素的高度，并且图像的大小将与0 不同
我能给你的最简单的答案是。
background-size : contain;以适合父容器的方式缩放图像。
html和body标签的高度为0px，因此图片无法放入。
您需要制作一个具有宽度和高度属性的div，这样background-size : contain;就可以工作了。：(
另一方面，background-size : cover;没有这个问题，它将始终覆盖整个父元素(甚至body/html标记(。
希望这能有所帮助。