为什么html的高度设置为100%时background-image显示完整？

Question

我看到 this video by Traversy Media where he shows how to make a parallax website. At this 他选择了 html 以及 body 标签。我认为可能有什么不同，添加 html 和 body 标签是多余的，因为 html 只有 body 和 head 在里面，而且因为我们正在设计 body，我们想要设置样式的所有内容，只需选择 body 即可设置样式。所以我最初没有在我的代码中写 "html" ，结果：背景图像只是覆盖了元素的背景并且隐藏了额外的部分（这应该是我的代码预期的，但我想知道为什么我们的结果不同。然后我意识到我的代码正常工作，而他的不同）。然后我意识到选择 body 和选择 html 之间有区别（我仍然不知道区别）。所以我在body之后写了选择html的代码，并将html的高度设置为100%。现在我得到了视频中显示的内容。但我不明白如何。据我所知，这应该没有什么不同，因为 "body" 在代码中将其高度设置为“100%”。当我删除 body 的高度时，它就像以前一样工作，即背景图像仅覆盖元素，即使 html 的高度设置为 100%。我也不明白html和body设置高度的目的。默认情况下它们不覆盖整个视口吗？

（这是我的第一个问题，如果我需要对问题进行任何更改以使其可回答，请告诉我）

编辑：添加了链接，在第一个代码片段上添加了“.pimg1, .pimg2, .pimg3{background-attachment: fixed;}”，添加第二个代码片段（预期结果但不期望）

我的代码使它按照我打算的方式工作（需要，但 non-understable）（Preview）：

   body{
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;

}

html{
    height: 100%;
}

.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    min-height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

我最初写的代码（预期但不希望）(Preview)

body{
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;
    height: 100%;
}



.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

p{
    font-size:30px;
}

已解决：我正在编辑容器 div 的高度，并认为我只是在编辑 background-image 的高度。我太不合逻辑了。我现在知道了。谢谢https://whosebug.com/users/897416/charles and https://whosebug.com/users/8620333/temani-afif

Answer 1

如果您没有定义 html 的高度，但在 body 上定义了一个百分比高度，那么该值将计算为 auto。

来自 height (MDN):

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

或者，您可以使用视口单位（例如，vh）。例如：

.pimg1 {
  background-image: url("../img/image1.jpg");
  min-height: 100vh;
}

… 那么您不需要在 html 或 body 上定义高度。

参见 CSS values and units (MDN)

为什么html的高度设置为100%时background-image显示完整？

Why does background-image show fully when html's height is set to 100%?

html

css

height

background-image