html – 覆盖嵌入视频的透明背景

发布时间：2020-12-14 19:45:57 所属栏目：资源来源：网络整理

导读：我有一个视频,我已经嵌入了全宽div面板.我试图在它上面叠加一个渐变,但我无法使它工作.我已经尝试调整z-index,将视频包装在另一个div中,并且如下所示添加一个覆盖类,但我必须遗漏一些明显的东西. 无论我尝试什么,视频都会跳回到其他面板的顶部(最终落后于

我有一个视频,我已经嵌入了全宽div面板.我试图在它上面叠加一个渐变,但我无法使它工作.我已经尝试调整z-index,将视频包装在另一个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%;
  }


最佳答案
这是一个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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!