叠加比它下面的视频更大

Question

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

或者，如果我在主页部分删除此background-size: cover;，则如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 编辑：添加源代码链接：

Download source code

Answer 1

根据你链接到的源代码，这里有CSS改变，我认为它会做你想要实现的。

我用您当前的方法看到的两个问题是，您没有延伸视频来填充.home-section，也没有伸展.home-section的背景图片（叠加层）来填充{{ 1}}。

.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; } ）的方法可能无法在所有浏览器中使用，并且根据您希望提供的浏览器支持级别，您可能希望使用不同的浏览器支持缩放视频的方法。我使用它是因为它快速而简单。