css - 视频背景上的文字变得不透明

Question

我使用的是中间有文本标题的视频背景。当我没有在文本中编码的视频时，文本是白色的，但是一旦我添加视频，白色文本就会变得不透明，我不想要这个。 HTML；

  <div class="top-content">
    <div class="container">
    <video autoplay muted>    
        <source src="videoone.mp4" type="video/mp4">
      </video>
      <div class="row">
        <div class="col-sm-12 text wow fadeInDown">
          <h1>Made to Represent</h1>
        </div>
      </div>
    </div>
  </div>

我尝试在相关设置的 CSS 中使用 !important。我在 codepen 上整理了一个简化版本 - https://codepen.io/grabthereef/pen/xyQzNj

有什么我想念的吗？

Answer 1

尝试添加 position: absolute 并将 z-index: 999 添加到您的类中

.top-content .text h1 {
    letter-spacing: 24px;
    font-weight: 400;
    font-size: 48px;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    z-index: 999;
}