如何讓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！