这篇文章发布于 2019年05月16日,星期四,22:18,归类于 CSS相关。 阅读 71406 次, 今日 34 次 14 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8622
本文可全文转载,个人网站无需授权,但需要保留原作者、出处以及文中链接,任何网站均可摘要聚合,商用请联系授权。
一、视频背景透明的方法
在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混合模式”。
预告,接下来两个星期文章会爆更,请做好准备吧!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8622
(本篇完)
- 深入理解CSS mix-blend-mode滤色screen混合模式 (0.786)
- 深入理解CSS background-blend-mode的作用机制 (0.586)
- HandBrake乃MP4免费压缩webm转换工具不二之选 (0.266)
- 从天猫某活动视频不必要的3次请求说起 (0.266)
- ogv.js让iPhone支持webM视频解析播放 (0.266)
- FDCon2019大会分享之滤镜与混合模式实录 (0.239)
- CSS混合模式mix-blend-mode/background-blend-mode简介 (0.214)
- CSS, SVG和canvas分别实现文本文字纹理叠加效果 (0.214)
- HTML中无标签文本的CSS变色技巧 (0.214)
- JS视频解码JSMpeg和Broadway开箱测评 (0.214)
- 小tips:使用canvas在前端实现图片水印合成 (RANDOM - 0.149)
请问这串css代码支持让webm黑色背景透明吗?
可以。
视频时黑白两种颜色倒是没问题,但是遇到比如红色加上这个mix-blend-mode: screen颜色就变了~不再是原来的那种红色了。
请问我按照您这种方式来实现,为什么效果不对啊?这是我的代码:
video{
mix-blend-mode: screen
}
function autoplay() {
var video = document.getElementById(“video”);
video.play();
}
</html
好实用
很实用
可以搞点特效
not bad
厉害厉害,学到了
贼6
可惜,这个技能只能在面向 PC 端的页面上使用。移动端的浏览器都喜欢劫持 video 标签, 很无语……
+1, 因为这个原因我网站视频在移动端全部换成图片了
视频导出的时候,可以直接α通道的
因吹斯听
6666实用!