我正在尝试将视频放置在紫色层下,但我的视频无法正确放置在叠加层上。

html - 叠加层大于下方的视频-LMLPHP

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

html - 叠加层大于下方的视频-LMLPHP



.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

最佳答案

根据您链接到的源代码,以下是CSS更改,我认为这些更改将完成您要实现的目标。

我目前使用的方法遇到的两个问题是,您没有拉伸视频以填充.home-section,也没有拉伸.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;
}


请注意,将视频拉伸以填充其容器(object-fit)的方法可能不适用于所有浏览器,并且取决于您希望提供的浏览器支持级别,您可能需要使用其他方法缩放视频。我使用它是因为它既快速又容易。

关于html - 叠加层大于下方的视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47358455/

10-12 12:32
查看更多