在嵌入式视频上叠加透明背景 [英] Overlaying a transparent background on an embedded video

问题描述

我有一个视频，该视频已嵌入全角div面板中.我正在尝试在其上叠加渐变，但是无法使其正常工作.我曾尝试过调整z-index，将视频包装在另一个div中，然后-如下所示-添加了一个overlay类，但是我肯定会遗漏一些明显的东西.

I've a video which I've embedded in a fullwidth div panel. I'm trying to overlay a gradient on top of it, but I can't make it work. I've tried adjusting z-index, wrapping the video in another div, and - as below - adding an overlay class, but I must be missing something obvious.

无论我如何尝试，视频都会跳回到其他面板的顶部(最终落在其后).

Whatever I try, the video jumps back on top of the other panels (which end up falling behind it).

非常感谢您的帮助！

                <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%;
  }

推荐答案

这是小提琴

我在演示中使用了绿色叠加层.

I used green overlay for the demo.

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

这篇关于在嵌入式视频上叠加透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！