我正在尝试将视频放置在紫色层下,但我的视频无法正确放置在叠加层上。
或者,如果我在首页部分删除此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
最佳答案
根据您链接到的源代码,以下是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/