在 html 标签视频前添加重复图片

Question

我创建了一个 div 视频，我想在视频前面添加一个重复的 png 图像（小方块 1x1px）。

HTML

<div id="video-background"></div>
<div id="video-wrap">
    <video id="loop-video" loop preload="auto" src="vid.mp4" autoplay>
    </video>
</div>

CSS

#video-background {
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 600px;
  background-image: url('../img/imgtrama.png');
  background-repeat: repeat;
}
#video-wrap {
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 600px;
}
#video-wrap #loop-video {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

不管我把方形背景放在哪里，我总是看到没有它的视频。

我试过使用 z-index 但它不起作用。

Answer 1

如评论中所述，将 #video-background div 放在 #video-wrap div 中。我还调整了一些 CSS 以使其工作：

#video-background {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('http://placehold.it/50x50');
  background-repeat: repeat;
  opacity: .8;
}
#video-wrap {
  overflow: hidden;
  position: relative;
}
#video-wrap #loop-video {
  width: 100%;
}

<div id="video-wrap">
    <video id="loop-video" loop preload="auto" src="http://techslides.com/demos/sample-videos/small.mp4" autoplay></video>
    <div id="video-background"></div>
</div>

在 html 标签视频前添加重复图片

Add a repeated image in front of a html tag video

html

css

overlay

html5-video