html - css 向下滚动的背景

Question

我想知道如何使用 CSS 和 HTML 做这样的事情:

https://www.vatsim.net

你打开页面，你会得到一个适合所有浏览器的背景，但是当你向下滚动时，你会得到一个纯色作为背景和更多信息。

我试过这个，但这不是我要找的，我想要顶部的链接之类的东西，

https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

非常感谢!

Answer 1

只需添加一点 CSS，您就能走得更远。在下面的代码片段中，有两个 div。第一个用于图像的顶部区域。第二个是其余内容。

第一个 div 的高度为 100vh，使其成为屏幕高度的 100%。背景图像居中并设置为缩放以覆盖整个 div。而且，好吧，这基本上就是它的全部内容。无需脚本。

* { /* Just get rid of some whitespace */
  padding: 0;
  margin: 0;
}

div.image {
  height: 100vh; /* div is 100% of viewport height */
  background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
  background-size: cover; /* Entire div is covered by the image */
  background-position: center; /* Image is centered relatively to the div. */
}

/* Just some styling to make it visible. */
div {
  color: white;
  font-size: 150%;
}

div.content {
  color: black;
  background-color: #eee;
  height: 2000px;
}

<div class="image">This is the top area. The image exactly covers the view.</div>

<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>