背景视频掩盖了 HTML 标题标签

问题描述

我尝试更改 Z-index 以执行我想要的操作，但没有解决。我无法弄清楚我做错了什么。我希望我的标题位于背景视频的顶部。有人能指出我正确的方向吗？

#hero {
  width: 100%;
  height: 100vh;

   background: url("../vid/everything.mp4");
  background-size: cover;
  position: relative;
  padding-top: 82px;
}

<section id="hero" class="d-flex align-items-center">

  <video loop muted autoplay poster="assets/vid/everything.mp4" class="fullscreen-bg__video">
  <source src="assets/vid/everything.mp4" type="video/mp4">
  </video>

  <div class="container" data-aos="zoom-out" data-aos-delay="100">
    <div class="row">
      <div class="col-xl-6">
        <h1>Welcome! heading 1</h1>
        <h2>heading 2</h2>
        <a href="#about" class="btn-get-started scrollto">Get Started</a>

      </div>
    </div>
  </div>


</section>

现在它只显示我的视频并覆盖了标题。我试图弄乱我的 CSS 文件，但无法弄清楚。我在测试时也去掉了 "Background: url " 并且这样做时它也不会工作。我做错了什么？

解决方法

试试这个...

<section id="hero" class="d-flex align-items-center">

  <video loop muted autoplay poster="assets/vid/everything.mp4" class="fullscreen-bg__video">
  <source src="assets/vid/everything.mp4" type="video/mp4">
  </video>

  <div class="container" data-aos="zoom-out" data-aos-delay="100">
    <div class="row">
      <div class="col-xl-6 vid-txt">
        <h1>Welcome! Heading 1</h1>
        <h2>Heading 2</h2>
        <a href="#about" class="btn-get-started scrollto">Get Started</a>

      </div>
    </div>
  </div>


</section>

#hero {
  width: 100%;
  height: 100vh;

   background: url("../vid/everything.mp4");
  background-size: cover;
  position: relative;
  padding-top: 82px;
}
.vid-txt{
  position: absolute;
}