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标记视频前添加重复图像

1 个答案: