Question

简单地说，我试图创建一个带有视频背景的div / section，它填满了初始视口的全屏，并允许其他部分跟随它。

完全相同的东西：http://jmd.im/

请注意，无论窗口大小是多少，该部分始终都是窗口的大小，并且在向下滚动之前保持这样。我希望在其下方有其他部分，以便您可以向下滚动并查看它们。

这样做的最佳方式是什么？

Answer 1

只需创建一个部分并为其指定视口高度，同时在其中添加一个可缩放以适合的视频：

＆＃13;

header {
  width: 100%;
  height: 100vh;
  position: relative;
}
img, video {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

＆＃13;

<header>
  <img src="http://placehold.it/1920x1080" />
</header>

＆＃13;

使用绝对定位将其推到后面，只需添加其他内容即可。

Answer 2

我给出了相同的答案作为评论，我想我会尝试并分享代码以使其更容易：

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

section {
  position: relative;
  height: 100vh;
}

video {
  height: 100%;
  width: 100%;
  position: absolute;
  object-fit: cover;
  z-index: -1;
}

div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: 50px;
  padding: 0;
  margin: auto;
  text-align: center;
}

/*.one { background: #DEBD63; }*/

.two {
  background: #DE6363;
}

.three {
  background: #6380DE;
}

<section class="one">
  <video autoplay="true">
		<source src="https://ak2.picdn.net/shutterstock/videos/2529842/preview/stock-footage-hd-flying-through-a-glorious-nebula-and-star-fields-in-deep-space-loop-formats-available.mp4" type="video/mp4">
	</video>

  <div>
    <h1>Content</h1>
  </div>
</section>

<section class="two"></section>

<section class="three"></section>

创建具有视频背景的部分，填充初始视口并允许内容低于它

2 个答案: