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

Question

我尝试更改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 "，这样做也不起作用。我做错了什么？

Answer 1

试试这个。。。

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