如何让MP4 video视频背景色变成透明？

本文转自：https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/

亲测，pc端有效，但移动端微信内无效

1、视频背景透明的方法

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

有！

咱们能够借助CSS mix-blend-mode混合模式属性曲线救国。

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

因而咱们要实现一个视频背景色透明的效果就很简单，只要把咱们的视频背景色设置为黑色，同时设置以下CSS便可：

video {
    mix-blend-mode: screen;
}

例如：

下面有一张底图：

而后还有一个下雨的视频（不播放请点击）：

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

就这么简单！

在全部不须要兼容IE浏览器的项目中均可以使用。

相信你必定学到了这个技能TIPS！