html 如何在视频顶部放置文本和图标

Question

在下面的 html 中插入视频剪辑作为背景的最佳方法是什么？我希望标题、图标和功能显示在视频背景之上。我想将视频包含在 html 中，如下所示（或类似）

<video width="1920" height="1000" autoplay muted loop playsinline id="vid">
    <source src="my-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<script>
    document.getElementById('vid').play();
</script>

我试过绝对定位、负边距和其他方法，视频元素似乎不允许在其上放置任何内容。任何帮助，将不胜感激。谢谢。

.hero {
    position: relative;
    height: 500px;
}

.hero-title {
    z-index: 20;
    color: white;
    text-align: center;
    margin-top: 50px;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-btm-area {
    margin-bottom: 50px;
    z-index: 20;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-icon {
    width: 40px;
    margin-bottom: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="hero">
  <div class="container h-100 d-flex flex-column">
    <div class="row">
      <div class="col">
        <div class="hero-title">
          <h1>Hero Title</h1>
        </div>
      </div>
    </div>
    <div class="row mt-auto hero-btm-area">
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature One
      </div>
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Two
      </div>
      <div class="col text-white text-center">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Three
      </div>
    </div>
  </div>
  <div class="hero-bg-img">
  </div>
</div>

Answer 1

您可以使用 CSS 的属性称为 z-index。 z-index: -1 会将视频放在背景后面。你需要把 position: absolute 放在内容后面。

Obs：视频背景置顶的部分没看懂，如有不妥请指正

.hero {
    position: relative;
    height: 500px;
}

.hero-title {
    z-index: 20;
    color: white;
    text-align: center;
    margin-top: 50px;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-btm-area {
    margin-bottom: 50px;
    z-index: 20;
    text-shadow: 0px 0px 7px rgb(0, 0, 0);
}

.hero-icon {
    width: 40px;
    margin-bottom: 10px;
}
#vid {
  position: absolute;
  top: 0; left: 0;
  object-fit: cover;
  z-index: -1;
}

<video width="1920" height="1000" autoplay muted loop playsinline id="vid">
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<script>
    document.getElementById('vid').play();
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hero">
  <div class="container h-100 d-flex flex-column">
    <div class="row">
      <div class="col">
        <div class="hero-title">
          <h1>Hero Title</h1>
        </div>
      </div>
    </div>
    <div class="row mt-auto hero-btm-area">
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature One
      </div>
      <div class="col text-white text-center border-right border-white">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Two
      </div>
      <div class="col text-white text-center">
        <div class="hero-icon mx-auto">
          **Icon**
        </div>
        Feature Three
      </div>
    </div>
  </div>
  <div class="hero-bg-img">
  </div>
</div>

OBS 2：视频很奇怪，因为它只是一个模板，然后你把你的视频

html 如何在视频顶部放置文本和图标

How to Position Text and Icons on Top of a Video in html

html

video