我有一个嵌入在全宽div面板中的视频。我想在其上覆盖一个渐变,但无法实现。我尝试了调整z-index、将视频包装在另一个div中,以及像下面这样添加叠加类,但显然我错过了某些明显的东西。
无论我尝试什么,视频总是跳到其他面板的顶部(其他面板最终落后于它)。
非常感谢您的帮助!
<div class="videoContainer hide-for-small-only">
<div class="overlay"></div>
<video autoplay loop muted>
<source src="<?=URL?>public/videos/vid.mp4" type="video/mp4">
<source src="<?=URL?>public/videos/vid.webm" type="video/webm">
</video>
</div>
我的CSS是:
.videoContainer
{
position: absolute;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 5px;
background-attachment: scroll;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
.videoContainer overlay {
background: black;
opacity: 0.5;
position: absolute;
z-index: 1;
text-align: center;
margin: 0%;
}