8
如何让MP4 video视频背景色变成透明？
source link: https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8622
本文可全文转载，个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。
一、视频背景透明的方法
在Web开发的时候，有些交互特效比较复杂，想要使用视频实现，但是有一个问题就是视频的背景色呀，它不能是透明的，导致设计师在制作视频的时候必须跟背景融合在一起，开发成本还是蛮高的，维护起来也比较头疼，那有没有什么好办法，可以让MP4 video视频背景色变成透明呢？
我们可以借助CSS mix-blend-mode混合模式属性曲线救国。
mix-blend-mode混合模式中有一种混合模式名为滤色，单词是screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。
于是我们要实现一个视频背景色透明的效果就很简单，只要把我们的视频背景色设置为黑色，同时设置如下CSS即可：
video {
mix-blend-mode: screen;
}
例如：
下面有一张底图：
然后还有一个下雨的视频（不播放请点击）：
此时，我们把视频覆盖在素图上方，同时设置这个视频的混合模式为screen，则可以看到视频背景变成透明了，下雨的动效很好的在底图上面呈现，如下效果所示（不播放请点击）（实时渲染，非IE浏览器下有效果）：
就这么简单！
在所有不需要兼容IE浏览器的项目中都可以使用。
相信你一定学到了这个技能TIPS！
关于滤色screen的深入理解，可以参见这篇文章：“深入理解CSS mix-blend-mode滤色screen混合模式”。
预告，接下来两个星期文章会爆更，请做好准备吧！
是不是学到了很多？可以
有话要说？点击Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK