html - 覆盖比它下面的视频更大

Question

我正在尝试将视频放在紫色图层下，但我的视频无法正确适合叠加层。

或者，如果我删除主页部分中的 background-size: cover; 如下所示:

.videoContainer {}

.videoContainer .overlay { /* ? */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: .5;
}

.videoContainer video {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.home-section {
  // background-size: cover;
  background-repeat: no-repeat;
  background-image: url('?');
  z-index: 9999;
}

<div class="home-section section">
  <div class="videoContainer">
    <video autoplay loop muted>
      <source src="?" type="video/mp4">
    </video>
  </div>
</div>

编辑:添加源代码链接:

Download source code

Answer 1

根据您链接到的源代码，这里有一些 CSS 更改，我认为这些更改可以实现您想要实现的目标。

我看到您当前方法的两个问题是您没有拉伸(stretch)视频以填充 .home-section，也没有拉伸(stretch) .home-section的背景图像(叠加层)填充 .home-section。

.home-section {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../res/bg_color_home.png);
    /* make sure to remove the z-index declaration */
}
.videoContainer {
    /* make video container fill its parent: */
    position: absolute;
    width: 100%;
    height: 100%;
    /* move it below .home-section: */
    z-index: -1;
}
.videoContainer video {
    /* make the video fill its parent: */
    width: 100%;
    height: 100%;
    /* and retain its aspect ratio: */
    object-fit: cover;
}

请注意，拉伸(stretch)视频以填充其容器的方法 (object-fit) 可能不适用于所有浏览器，并且根据您希望提供的浏览器支持级别，您可以想要使用不同的方法来缩放视频。我使用它是因为它又快又简单。