video设置绿色透明

html-css020

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

搞定！去看看吧！