html如何使mp4成为背景,如何让MP4 video视频背景色变成透明?
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: echarts 中国地图飞机实现demo
- 下一篇: 短视频剪辑教程自学难吗?子苗教育