本文转自:
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; }
例如: