用css给video视频标签上添加渐变效果

最新推荐文章于 2025-09-12 09:47:57 发布

原创最新推荐文章于 2025-09-12 09:47:57 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #html

在前端开发中，为了模仿网站视频封面的遮罩效果，作者通过CSS的filter属性实现了图片的亮度调节。对于视频的渐变遮罩，由于video标签不支持直接添加渐变，作者采用在video上覆盖一个span标签并设置线性渐变和透明度的方法。最终通过调整rgba颜色的透明度，成功创建了从上至下逐渐变淡的遮罩效果。

最近自学前端，在仿写某站首页时发现一些视频封面有遮罩效果，像调暗了些似的能够使上面的白色字体更加显眼，如图：

某站的：我的：

问过度娘之后发现可以给img图片添加一个属性来调节他的明暗度：

filter: brightness(100%);滤镜：亮度（100%）

此外filter还可添加其他属性：blur（模糊），opcity(透明度)，grayscale（灰度），sepia（褐色），saturate（饱和度），invert（颜色反转度），contrast（对比度），drop-shadow（阴影效果），hue-rotate（色彩旋转）

OK，这个问题解决了，可是写着写着又发现顶栏自动播放的视频也有遮罩效果，如图：

某站的：

我的：

与图片不一样的是，视频的遮罩是有渐变的，从上往下由黑到灰再到白，越往下遮罩效果越不明显。由于video标签无法添加渐变，于是我打算在video标签上盖一个span标签，设置一个渐变，再设置一个透明度，效果如下：

不管渐变的颜色和透明度怎么调，都感觉暗的地方不够暗，亮的地方不够暗。直到想到另一个设置颜色的方式 rgba(0,0,0,0),于是给span标签重新设置了颜色，并给颜色调整了透明度。效果如下：

代码如下：

<div style="width: 1680px; height: 157.5px;z-index: 1;overflow-y: hidden;position: relative;">
        <video  autoplay muted loop src="视频素材" style="width: 100%;position: absolute;top: -95px;overflow: hidden;"></video>
        <span style="display: block;width: 100%;height: 100%; position: absolute;top: 0;background: linear-gradient(to bottom,rgba(0,0,0,1),rgba(92,92,92,.3) 50%,rgb(255, 255, 255,.1));opacity: .4;"></span>
    </div>

如果有更优方法，欢迎大家在下方留言讨论😁