www.zhangxinxu.com
by
zhangxinxu
from
www.zhangxinxu.com/wordpress/?…
本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。
一、视频背景透明的方法
在Web开发的时候,有些交互特效比较复杂,想要使用视频实现,但是有一个问题就是视频的背景色呀,它不能是透明的,导致设计师在制作视频的时候必须跟背景融合在一起,开发成本还是蛮高的,维护起来也比较头疼,那有没有什么好办法,可以让MP4 video视频背景色变成透明呢?
我们可以借助CSS
mix-blend-mode混合模式属性
曲线救国。
mix-blend-mode
混合模式中有一种混合模式名为滤色,单词是
screen
,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。
于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:
video {
mix-blend-mode: screen;
}复制代码
下面有一张底图:
然后还有一个下雨的视频(不播放请点击):
此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):
就这么简单!
在所有不需要兼容IE浏览器的项目中都可以使用。
相信你一定学到了这个技能TIPS!
关于滤色screen的深入理解,可以参见这篇文章(还在写,周末放出)。
预告,接下来两个星期文章会爆更,请做好准备吧!😊
《CSS世界》
签名版独家发售,包邮,可指定寄语,
点击显示购买码
(本篇完)// 想要打赏?点击
这里
。有话要说?点击
这里
。