html - 向下滚动时，如何使其与我的视频重叠？

Question

所以我想这样做，当我从下面向下滚动 div 时，它会在我向下滚动时慢慢地与视频重叠。有点像 Minecraft 主页

Answer 1

将混合使用 z-index 和 position:fixed 来获得您的目标...

#myVideo {
  position: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1
}

h1 {
  color: #fff;
  text-align: center;
}

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<h1>Some Heading</h1>

<div style="position:relative;height:auto;background-color:lightblue;font-size:20px; margin:50% 5%">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

<div style="position:relative;height:auto;background-color:lightpink;font-size:16px; margin:40% 5%;">
  Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>