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

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

某站的：我的：

问过度娘之后发现可以给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>

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

用css给video视频标签上添加渐变效果相关推荐

CSS介绍/音视频标签/字体/文本/选择器
7.css介绍 1.什么是css? Cascading Style Sheets 通常称为css样式表.层叠样式表和级联样式表 , 给页面设置样式. 2.css引入方式--行间样式概述: 通过HTM ...
linux视频对话框,抖音对话框视频怎么做？如何在视频画面上添加对话气泡框？视频加对话气泡的方法...
小编家里有个快要两周岁的小侄女,平日里总是喜欢做一些人小鬼大的事情,这不,前段时间她妈妈发了一个小视频,她拉着一个跟她差不多大的行李箱一脸严肃地说她要去上班~那么小一个小不点,居然很认真地对她妈妈说要 ...
js实现video视频标签试看6分钟
js实现video视频标签试看6分钟的功能解决方法: 下面是实现试看视频6分钟的js代码,通过video标签的timeupdate事件来实现:http://www.yayihouse.com/yay ...
html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
cesium在billboard标签上添加文字
cesium在billboard标签上添加文字 var entity = viewer.entities.add({ name: "billboard", position: Ce ...
WebView无法自动播放h5的video视频标签解决办法
由于项目需求,在进入webview时需要自动播放h5里的video视频,国内网上找了比较多方案都不行,最后还是在Google上找到了解决办法: stackoverflow 加入一行代码: webVie ...
html5 video视频标签
HTML 5加入视频标签<Video>,无疑是HTML 5的一大亮点.本文一起来学习下吧. Video标签介绍大多数用户已经安装了Flash插件(事实上,大概95%的上网用户都装有Fl ...
html5 video 视频标签详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
HTML 5 video 视频标签全属性详解（转）
转自 http://www.cnblogs.com/kiter/ Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width ...

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

用css给video视频标签上添加渐变效果相关推荐

最新文章

热门文章