在前端开发中，为了模仿网站视频封面的遮罩效果，作者通过CSS的filter属性实现了图片的亮度调节。对于视频的渐变遮罩，由于video标签不支持直接添加渐变，作者采用在video上覆盖一个span标签并设置线性渐变和透明度的方法。最终通过调整rgba颜色的透明度，成功创建了从上至下逐渐变淡的遮罩效果。
最近自学前端，在仿写某站首页时发现一些视频封面有遮罩效果，像调暗了些似的能够使上面的白色字体更加显眼，如图：
某站的： 我的：
问过度娘之后发现可以给img图片添加一个属性来调节他的明暗度：
filter: brightness(100%);滤镜：亮度（100%）
此外filter还可添加其他属性：blur（模糊），opcity(透明度)，grayscale（灰度），sepia（褐色），saturate（饱和度），invert（颜色反转度），contrast（对比度），drop-shadow（阴影效果），hue-rotate（色彩旋转）
OK，这个问题解决了，可是写着写着又发现顶栏自动播放的视频也有遮罩效果，如图&#x
最低0.47元/天 解锁文章
扫一扫
6687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
