Question

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

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

这是我尝试过的方法，我也尝试过使用不起作用的background-color。使用滤镜会使背景变暗，但也会影响文本颜色

Answer 1

只需添加这个-

video {
   filter: brightness(50%);
}

Answer 2

只需在视频上方但在文字下方使用绝对定位的伪元素即可：

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

Answer 3

:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
    180deg, 
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.6) 100%
    ),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 100%);
    z-index: 2;
}

使视频背景变暗

3 个答案: