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

尝试在您的课程中添加位置：绝对位置，并将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;
}

Answer 2

从z-index: 1 CSS部分删除.top-content video是解决问题的最佳方法。如下；

.top-content video {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  opacity:0.7;
}

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

2 个答案: