Question

我已经将视频嵌入到全宽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%;
  }

Answer 1

我遇到了同样的问题，最终设法通过在彩色背景上用opacity:0.5设置视频就获得了美学上相似的效果。

.vid-bg {
  opacity: 0.5; /* ! */
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%
}

<body style="background-color: green">
    <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="vid-bg">
    <source src="http://inserthtml.com/demos/javascript/background-videos/flowers.mp4" type="video/mp4">
  </video>
</body>

在嵌入的视频上叠加透明背景

1 个答案: