Html 使视频背景变暗

如何在不影响视频文本的情况下使视频背景变暗

 <div class="fullscreen-bg">   
    <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
        <source src="images/instituteVideo.webm" type="video/webm">
    </video>
    <div class="text-vid">
        <h2 class="texts">Transform into a Smart Institute</h2>
    </div>
</div>

.fullscreen-bg {    
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 84vh;
            width: 100%;
            overflow: hidden;
            object-fit: cover;
            z-index: -99;
            position: relative;
            filter: brightness(75%);
    }

    .text-vid {
            position: absolute;
            top:10%;
     }

转型为智慧型学院
.全屏背景{
排名：0；
右：0；
底部：0；
左：0；
高度：84vh；
宽度：100%；
溢出：隐藏；
对象匹配：覆盖；
z指数：-99；
位置：相对位置；
滤光片：亮度（75%）；
}
.文本视频{
位置：绝对位置；
排名前10%；
}

---

这就是我尝试过的，我也尝试过使用背景色，但效果不好。使用滤镜会使背景变暗，但也会影响文本颜色

只需使用一个绝对定位的伪元素，该元素位于视频上方，但位于文本下方：

.fullscreen-bg::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';

    /* Any overlay color that you want, here I use black with 25% opacity */
    background-color: rgba(0,0,0,0.25);
}

简单地加上这个-

video {
   filter: brightness(50%);
}

：之前{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：线性梯度(
180度，
rgba（0,0,0,0.2）0%，
rgba（0,0,0,0.6）100%
),
线性梯度（180度，rgba（0,0,0,0.2）0%，透明100%）；
z指数：2；
}

无论如何都无法做到这一点，您无法通过CSS或jQuery更改视频。为什么你不试着制作你想要的视频，或者只是使用纯背景视频，并使用HTML和CSS动画制作文本动画。ruchika，你是指div背景还是视频叠加？