Question

我试图在视频上叠加，但它没有显示。

虚线仅显示在左侧和右侧，白色叠加层根本不显示。我也试过z-index，但没有结果。我正在使用Bootstrap。

这是我的HTML和CSS代码：

＆＃13;

#player {
  margin-top: -200px;
  margin-bottom: -200px;
  width: 100%;
  height: 100%;
  position: relative;
}
#video-div {
  width: 100%;
  overflow: hidden;
  display: block;
  height: 400px;
  position: relative;
  z-index: 1;
}
.outer-container {
  border: 1px dotted black;
  width: 100%;
  height: 100%;
  text-align: center;
}
.inner-container {
  border: 1px solid black;
  display: inline-block;
  position: relative;
}
.video-overlay {
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 10px;
  padding: 5px 5px;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  color: #FFF;
  background-color: rgba(50, 50, 50, 0.5);
}

＆＃13;

<div>
  <div class="row" id="video-row">
    <div class="col-xs-12" id="video-div" align="center">
      <div class="outer-container">
        <div class="inner-container">
          <div class="video-overlay">Some text here</div>
          <video id="player" src="pathToFile" autoplay muted></video>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

尝试添加z-index：100;在.video-overlay中，它可能会因某种原因被推下来。我认为你想要在视频前面显示.video-overlay

.video-overlay {
  z-index: 100;
  position: absolute;
  left: 0px;
  top: 0px;
  margin: 10px;
  padding: 5px 5px;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  color: #FFF;
  background-color: rgba(50, 50, 50, 0.5);
}

视频叠加未显示

1 个答案: