时间戳

首页 > 解决方案 > 如何在 html 中的视频顶部放置文本和图标

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

问题描述

在下面的 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>

标签： htmlvideo

解决方案

您可以使用名为 z-index 的 CSS 属性。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：视频很奇怪，因为它只是一个模板，然后你会把你的视频

推荐阅读