video设置绿色透明

html-css012

video设置绿色透明,第1张

Web开发的时候,有些交互特效比较复杂,想要使用视频实现,但是有一个问题就是视频的背景色呀,它不能是透明的,导致设计师在制作视频的时候必须跟背景融合在一起,开发成本还是蛮高的,维护起来也比较头疼,那有没有什么好办法,可以让MP4 video视频背景色变成透明呢?

有!

我们可以借助CSSmix-blend-mode混合模式属性曲线救国。

mix-blend-mode混合模式中有一种混合模式名为滤色,单词是screen,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。

于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:

例如:

下面有一张底图:

然后还有一个下雨的视频(不播放请点击):

此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):

就这么简单!

在所有不需要兼容IE浏览器的项目中都可以使用。

相信你一定学到了这个技能TIPS!

二、结语

关于滤色screen的深入理解,可以参见这篇文章:“深入理解CSS mix-blend-mode滤色screen混合模式”。

预告,接下来两个星期文章会爆更,请做好准

1、首先我们新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色。

2、然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色。

3、然后我们添加一个透明度的代码(opacity:0.6)。

4、在图层的上方,有个不透明度,我们把PS中图层不透明度设置为60%。

5、把刚才的背景色和不透明度代码删除,换个代码【background-color:rgba(255,255,255,0.6)】。

6、其中255,255,255就是PS中的拾色器里的数值。

分类: 电脑/网络 >>百度 >>百度空间

解析:

晕死!好像不用这么麻烦啊!

等会啊,我查查!

1.进入你的空间----|设置|----|模板设置|-----自定义模版CSS可以让您: • 直接编辑CSS文件,实现个性化效果----|编辑|

2.删除开头处的4句语句:

body{background-color:#FFFFFF}

#header{height:89pxbackground:#CDF991}

#header div.lc{}

#header div.rc{background:url(img.baidu/hi/temp9/hdr) no-repeat top right}

3.删除第21行处的这条语句:

.stage{background:#DFFFB2}

4.在开头位置复制并粘贴以下语句:

body {background:url(hiphotos.baidu/moxinxi/pic/item/66a2ccfc10df9c82b801a029) repeat fixed!important}

#m_pro{background:transparent}

#m_album{background:transparent}

#m_blog{filter:alpha(opacity=80)-moz-opacity:0.8width:auto !importantwidth:100%}

#header{height:89px}

#m_links{filter:alpha(opacity=80)-moz-opacity:0.8width:auto !importantwidth:100%}

搞定!去看看吧!