Question

我使用以下css方法将全屏背景视频部署到占据整个视口的主页。我想在视频的顶部放置一个透明的重复（平铺）静态.png背景图像。这可能吗？

video#bgvid {
	position: fixed;
	right: 0;
	bottom: 0;
	background-image: url(videobg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: auto;
	height: auto; 
	min-width: 100%;
	min-height: 100%;
	z-index: -100;
}

<video autoplay loop poster="videobg.jpg" id="bgvid">
	<source src="video.webm" type="video/webm">
	<source src="videobg/videobg.mp4" type="video/mp4">
</video>

Answer 1

根据我的评论，不可能让背景图像“显示”其不透明父元素的内容（无论内容设置为z-index的负面程度如何），因为它属于的背景。解决方案是将您的<video>元素包装在父元素中，比如<div>，以您想要的方式定位父元素，并附加一个子元素（因此视频的兄弟）叠加。

在我的例子中，我使用了我在Vimeo上找到的随机视频并将其嵌入，因此您可以实际看到结果：

#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}
#bgvid video,
#bgvid div.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#bgvid video {
  z-index: 1;
}
#bgvid .overlay {
  background-image: url(http://placehold.it/100x100);
  z-index: 2;
  opacity: 0.5;
}

<div id="bgvid">
  <video autoplay loop poster="videobg.jpg">
    <source src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" type="video/webm">
      <source src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" type="video/mp4">
  </video>
  <div class="overlay"></div>
</div>

Answer 2

绝对

您需要在视频和叠加层周围放置一个包裹元素。

<div id="videowrapper">
    <!-- Video and Overlay -->
</div>

然后是视频代码和叠加层。

<div id="overlay"></div>
<video autoplay loop poster="videobg.jpg" id="bgvid">
    <source src="video.webm" type="video/webm">
    <source src="videobg/videobg.mp4" type="video/mp4">
</video>

使用CSS将包装器设置为全屏和position:relative;。然后将叠加设置为position:absolute;，给定固定的宽度和高度以强制其大小，然后应用所需的背景图像。

#videowrapper {
    position:relative;
    height:500px;
    width:100%;
    display:block;
}

#overlay {
    position:absolute;
    width:30%;
    height:200px;
    top:15%;
    z-index:999; /* make sure its above the video */
}

例如。

是否可以使用css在全屏视频（mp4）div背景上堆叠部分透明的png图像？

2 个答案: