html - 如何使用 CSS 在视频上创建黑色叠加层？

问题描述

各位程序员，你好，

所以我很难在我的标签上创建一个大约 50% 不透明度的黑色叠加层。

所以检查一下：

       <div class="section s1">
        <h1>"The Reaper"</h1>
        <h2>Limited edition watch</h2>
        <img src="assets\img\watch.png" alt="Watch">

        <div class="video-container">

            <video data-autoplay loop muted poster="assets\img\hero-1.jpg">
                <source src="assets\img\video.webm" type="video/WebM">
            </video>

        </div>
    </div>

和CSS：

.s1{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.s1 h1{
    position: relative;
    text-align: center;
    color: white;
    font-size: 3rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    z-index: 1;
    left: 0px;
    width: 50%;
    display: inline-block;
    animation: fadein 5s;
    -moz-animation: fadein 5s;
    /* Firefox */
    -webkit-animation: fadein 5s;
    /* Safari and Chrome */
    -o-animation: fadein 5s;
    /* Opera */
}

.s1 h2 {
    position: relative;
    text-align: center;
    color: white;
    font-size: 1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    z-index: 1;
    left: 0px;
    width: 50%;
    display: inline-block;
    animation: fadein 5s;
    -moz-animation: fadein 5s;
    /* Firefox */
    -webkit-animation: fadein 5s;
    /* Safari and Chrome */
    -o-animation: fadein 5s;
    /* Opera */
}

.s1 img{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    z-index: 1;
    display: inline-block;
    -webkit-animation: slide 3s forwards;
    animation: slide 3s forwards;
}



.video-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:0;
    overflow: hidden;
} 

.s1 video{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index:0;
    pointer-events: none;
}

#video-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(17, 17, 17, 0.3));
}

所以问题是：我将如何在我的背景视频上创建黑色叠加层？随时询问有关我的问题的任何问题。

祝你有美好的一天！干杯

标签： htmlcss

html - 如何使用 CSS 在视频上创建黑色叠加层？

问题描述

解决方案

推荐阅读