如何解决背景视频掩盖了 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。