javascript - 如何使 CSS 背景的一部分完全适合浏览器

Question

我是 CSS 的新手，所以我真的不知道如何描述它，但这里有一个例子:website

如您所见，无论分辨率如何，网站顶部的背景图片的高度和宽度都非常适合任何浏览器的空间。当您向下滚动页面时，它会保持相同的样式，其中特定的背景颜色非常适合浏览器的空间。我已经在笔记本电脑和移动设备上对此进行了测试，每次都非常适合。我如何实现这一目标？它是否可以纯粹通过 CSS 实现，还是我必须涉及 JavaScript/Jquery 等？我看到很多网站都使用这种特定的样式，我想了解它是否已完成。

我不是专门要求代码，只是一个说明我应该搜索什么的答案。然而，代码是值得赞赏的。

Answer 1

您可以使用浏览器的开发人员工具来准确查看该网站是如何创建效果的。它是 CSS 和 JavaScript 的组合。

CSS:

.homepage-intro.homepage {
    background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
    background-size: cover;
}

然后 JavaScript 显式设置 <div> 的高度以匹配浏览器窗口。