Question

我想知道我怎么能用CSS＆amp ;; HTML：

https://www.vatsim.net

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

我试过这个，但不是我想要的，我想要像顶部的链接，

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

非常感谢！

Answer 1

您添加的网页基本上分为div，第一个是100％高度和100％宽度。所以你可以在屏幕上看到他。

其他只是100％宽度而不是100％高度的div，这使您能够将背景颜色从浅灰色切换为白色然后再切换为灰色。

不是太复杂但设计不错

Answer 2

你可以通过添加一些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>

向下滚动css的背景

2 个答案: