我有一个视频,我已经嵌入了全宽div面板.我试图在它上面叠加一个渐变,但我无法使它工作.我已经尝试调整z-index,将视频包装在另一个div中,并且 – 如下所示 – 添加一个覆盖类,但我必须遗漏一些明显的东西.
无论我尝试什么,视频都会跳回到其他面板的顶部(最终落后于它).
非常感谢你的帮助！
最佳答案
这是一个fiddle
我在演示中使用了绿色叠加层.
CSS
.videoContainer {
position: relative;
width: 100%;
height: 100%;
//padding: 20px;
border-radius: 5px;
background-attachment: scroll;
overflow: hidden;
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
position: relative;
z-index: 1;
}
.videoContainer .overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background: green;
opacity: 0.5;
}
原文链接：https://www.f2er.com/html/426891.html