如何让MP4 video视频背景色变成透明?

这篇文章发布于 2019年05月16日,星期四,22:18,归类于 CSS相关。 阅读 65027 次, 今日 6 次 14 条评论

 

mp4视频背景透明

一、视频背景透明的方法

在Web开发的时候,有些交互特效比较复杂,想要使用视频实现,但是有一个问题就是视频的背景色呀,它不能是透明的,导致设计师在制作视频的时候必须跟背景融合在一起,开发成本还是蛮高的,维护起来也比较头疼,那有没有什么好办法,可以让MP4 video视频背景色变成透明呢?

有!

我们可以借助CSS mix-blend-mode混合模式属性曲线救国。

mix-blend-mode混合模式中有一种混合模式名为滤色,单词是screen,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。

于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:

video {
    mix-blend-mode: screen;
}

例如:

下面有一张底图:

景物素材图

然后还有一个下雨的视频(不播放请点击):

此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):

景物素材图

就这么简单!

在所有不需要兼容IE浏览器的项目中都可以使用。

相信你一定学到了这个技能TIPS!

二、结语

关于滤色screen的深入理解,可以参见这篇文章:“深入理解CSS mix-blend-mode滤色screen混合模式”。

预告,接下来两个星期文章会爆更,请做好准备吧!

(本篇完)

分享到:


发表评论(目前14 条评论)

  1. jerry说道:

    请问这串css代码支持让webm黑色背景透明吗?

  2. 橡皮擦说道:

    视频时黑白两种颜色倒是没问题,但是遇到比如红色加上这个mix-blend-mode: screen颜色就变了~不再是原来的那种红色了。

  3. 视频背景透明说道:

    请问我按照您这种方式来实现,为什么效果不对啊?这是我的代码:

    video{
    mix-blend-mode: screen
    }

    function autoplay() {
    var video = document.getElementById(“video”);
    video.play();
    }

    </html

  4. silence说道:

    好实用

  5. ailoooong说道:

    很实用
    可以搞点特效

  6. rock说道:

    厉害厉害,学到了

  7. cshenger说道:

    贼6

  8. mengkun说道:

    可惜,这个技能只能在面向 PC 端的页面上使用。移动端的浏览器都喜欢劫持 video 标签, 很无语……

  9. 伊撒尔说道:

    视频导出的时候,可以直接α通道的

  10. 心满说道:

    因吹斯听

  11. 梁凉说道:

    6666实用!