本文轉自：https://www.zhangxinxu.com/wordpress/2019/05/mp4-video-background-transparent/
親測，pc端有效，但移動端微信內無效
一、視頻背景透明的方法
在Web開發的時候，有些交互特效比較復雜，想要使用視頻實現，但是有一個問題就是視頻的背景色呀，它不能是透明的，導致設計師在制作視頻的時候必須跟背景融合在一起，開發成本還是蠻高的，維護起來也比較頭疼，那有沒有什么好辦法，可以讓MP4 video視頻背景色變成透明呢？
有！
我們可以借助CSS mix-blend-mode混合模式屬性曲線救國。
mix-blend-mode混合模式中有一種混合模式名為濾色，單詞是screen，其有一個很有意思的特性表現，那就是黑色和其它元素進行混合的時候表現為透明。
於是我們要實現一個視頻背景色透明的效果就很簡單，只要把我們的視頻背景色設置為黑色，同時設置如下CSS即可：
video {
mix-blend-mode: screen;
}
例如：
下面有一張底圖：
然后還有一個下雨的視頻（不播放請點擊）：
此時，我們把視頻覆蓋在素圖上方，同時設置這個視頻的混合模式為screen，則可以看到視頻背景變成透明了，下雨的動效很好的在底圖上面呈現，如下效果所示（不播放請點擊）（實時渲染，非IE瀏覽器下有效果）：
就這么簡單！
在所有不需要兼容IE瀏覽器的項目中都可以使用。
相信你一定學到了這個技能TIPS！