by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8622

本文可全文轉(zhuǎn)載，個(gè)人網(wǎng)站無(wú)需授權(quán)，但需要保留原作者、出處以及文中鏈接，任何網(wǎng)站均可摘要聚合，商用請(qǐng)聯(lián)系授權(quán)。

一、視頻背景透明的方法

在Web開發(fā)的時(shí)候，有些交互特效比較復(fù)雜，想要使用視頻實(shí)現(xiàn)，但是有一個(gè)問題就是視頻的背景色呀，它不能是透明的，導(dǎo)致設(shè)計(jì)師在制作視頻的時(shí)候必須跟背景融合在一起，開發(fā)成本還是蠻高的，維護(hù)起來也比較頭疼，那有沒有什么好辦法，可以讓MP4 video視頻背景色變成透明呢？

有！

mix-blend-mode混合模式中有一種混合模式名為濾色，單詞是screen，其有一個(gè)很有意思的特性表現(xiàn)，那就是黑色和其它元素進(jìn)行混合的時(shí)候表現(xiàn)為透明。

于是我們要實(shí)現(xiàn)一個(gè)視頻背景色透明的效果就很簡(jiǎn)單，只要把我們的視頻背景色設(shè)置為黑色，同時(shí)設(shè)置如下CSS即可：

video {

mix-blend-mode: screen;

}

例如：

下面有一張底圖：

然后還有一個(gè)下雨的視頻(不播放請(qǐng)點(diǎn)擊)：

此時(shí)，我們把視頻覆蓋在素圖上方，同時(shí)設(shè)置這個(gè)視頻的混合模式為screen，則可以看到視頻背景變成透明了，下雨的動(dòng)效很好的在底圖上面呈現(xiàn)，如下效果所示(不播放請(qǐng)點(diǎn)擊)(實(shí)時(shí)渲染，非IE瀏覽器下有效果)：

就這么簡(jiǎn)單！

在所有不需要兼容IE瀏覽器的項(xiàng)目中都可以使用。

相信你一定學(xué)到了這個(gè)技能TIPS！

二、結(jié)語(yǔ)

預(yù)告，接下來兩個(gè)星期文章會(huì)爆更，請(qǐng)做好準(zhǔn)備吧！

本文為原創(chuàng)文章，會(huì)經(jīng)常更新知識(shí)點(diǎn)以及修正一些錯(cuò)誤，因此轉(zhuǎn)載請(qǐng)保留原出處，方便溯源，避免陳舊錯(cuò)誤知識(shí)的誤導(dǎo)，同時(shí)有更好的閱讀體驗(yàn)。

本文地址：https://www.zhangxinxu.com/wordpress/?p=8622

(本篇完)

總結(jié)

以上是生活随笔為你收集整理的html如何使mp4成为背景,如何让MP4 video视频背景色变成透明？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。