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

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

视频{ 位置：固定； 右：0； 底部：0； 背景图片：url（videobg.jpg）； 背景重复：无重复； 背景尺寸：封面； 宽度：自动； 高度：自动； 最小宽度：100%； 最小高度：100%； z指数：-100； }

绝对正确

您需要在视频和覆盖层周围有一个环绕元素

<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>

---

例如。

根据我的评论，不可能让背景图像“显示”其不透明父元素的内容（无论内容设置为多么负的

z-index

），因为它属于背景。解决方案是将

元素包装在父元素中，比如说

，以您想要的方式定位父元素，并附加一个子元素（因此视频的同级元素）作为覆盖

<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>

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

#bgvid{
位置：固定；
右：0；
底部：0；
最小宽度：100%；
最小高度：100%；
宽度：自动；
高度：自动；
}
#bgvid视频，
#bgvid div.overlay{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
#bgvid视频{
z指数：1；
}
#视频叠加{
背景图片：url(http://placehold.it/100x100);
z指数：2；
不透明度：0.5；
}

是的，这是可能的。但是叠加必须是一个单独的元素，绝对定位在视频上，而不是作为背景图像属性。尽管可以叠加具有宽度、高度和背景的绝对div。这是全屏背景视频网站的常见做法，它们通常会覆盖一个徽标或标题。谢谢大家，效果很好。谢谢你的帮助。干杯