如何在文本滚动时固定视频背景？

Question

当我确实为背景添加视频时，它只存在于页面的顶部，但我认为页面的 rest 正在滚动

<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>

CSS

 .hero{
     width: 100%;
     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;
     align-items: center;
     justify-content: center;
}
 .content{
     text-align:center;
}
 .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{
         background-attachment: fixed;
         position: absolute;
         right: 0;
         bottom: 0;
         z-index: -1;
    }
     @media(min-aspect-ratio: 16/9){
         .back-video{
             width: 100%;
             height: auto;
        }
    }
     @media(max-aspect-ratio: 16/9){
         .back-video{
             width: auto;
             height: 100%;
        }
    }

Answer 1

your.back-video 是一个video标签，所以background-attachment在这里不起作用（这个属性只对有背景的元素有效，比如 background-image）；

要将视频用作实际页面的背景，您必须使用position:fixed和object-fit:cover （这样视频在适合纵横比时不会拉伸）。

视频还应为height: 100vh和width: 100vw （或 100%）以适合整个屏幕。 无需添加 @media 来检查 window 的最小和最大纵横比，因为object-fit:cover会正确地适应所有 window 尺寸的视频。