如何设置固定视频背景，实现页面滚动时文本正常滚动？

问题分析 #

• 原.hero容器设置了height: 100vh，仅覆盖首屏区域，滚动页面后该容器会移出视口，导致内部的视频背景随之消失。
• CSS存在选择器嵌套错误：.content a和.back-video的样式被错误嵌套在.content h1:hover规则内，导致这些样式只有在标题hover时才会生效，完全不符合预期。
• background-attachment: fixed对视频元素无效，这个属性仅作用于背景图片。

修改步骤 #

1. 调整视频的定位方式 #

将视频设置为固定定位（fixed），使其脱离文档流，始终固定在视口范围内，作为全局背景。同时确保它的层级低于内容（z-index: -1）。

2. 修复CSS嵌套错误 #

把.content a和.back-video的样式从.content h1:hover中移出，作为独立的CSS规则。

3. 调整页面结构与容器样式 #

如果需要页面滚动，.hero可以保留相对定位，但其高度不必限制为100vh，让内容可以自然延伸，同时视频背景始终固定在底层。

修改后的完整代码 #

HTML #

<div class="hero">
  <video autoplay loop muted plays-inline class="back-video">
    <source src="/pexels-rostislav-uzunov-5680034.mp4" type="video/mp4">
  </video>
  <div>
    <nav>
      <img src="/401-logo.png" class="logo">
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">POPULAR</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
    </nav>
  </div>
  <div class="content">
    <h1>Code Engine</h1>
    <a href="#">Get Started</a>
  </div>
  <!-- 添加测试内容验证滚动效果 -->
  <div class="extra-content">
    <p>滚动页面即可看到视频背景始终保持显示</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
  </div>
</div>

CSS #

/* 全局重置避免默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero {
  width: 100%;
  /* 移除固定100vh，让内容自然撑开高度 */
  min-height: 100vh;
  background-image: linear-gradient(rgba(12,3,51,0.3),rgba(12,3,51,0.3));
  position: relative;
  padding: 0 5%;
  display: flex;
  flex-direction: column; /* 垂直排列内容，方便堆叠 */
  align-items: center;
  justify-content: flex-start; /* 内容从顶部开始，支持滚动 */
  gap: 2rem;
}

.content {
  text-align: center;
  margin-top: 4rem;
}

.content h1 {
  font-size: 160px;
  color: #fff;
  transition: 0.5s;
}

.content h1:hover {
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}

.content a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-size: 24px;
  border: 2px solid #fff;
  padding: 14px 70px;
  border-radius: 50px;
  margin-top: 20px;
}

.back-video {
  /* 固定定位，始终覆盖整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保视频按比例填充视口，无黑边 */
  z-index: -1; /* 置于内容下方 */
}

.extra-content {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
  text-align: center;
  margin-bottom: 4rem;
}

/* 保留原响应式适配规则 */
@media(min-aspect-ratio: 16/9){
  .back-video{
      width: 100%;
      height: auto;
  }
}

@media(max-aspect-ratio: 16/9){
  .back-video{
      width: auto;
      height: 100%;
  }
}

关键改动说明 #

• position: fixed：让视频脱离文档流，始终固定在视口，滚动页面时不会跟随移动。
• object-fit: cover：确保视频自适应视口比例，避免拉伸或出现黑边。
• 修复CSS嵌套错误：将.content a和.back-video的样式从hover规则中移出，确保它们始终生效。
• 调整.hero布局：改为垂直排列，移除固定高度，让内容自然延伸支持滚动。

内容的提问来源于stack exchange，提问作者aakash kumar