有!
我们可以借助CSSmix-blend-mode混合模式属性曲线救国。
mix-blend-mode混合模式中有一种混合模式名为滤色,单词是screen,其有一个很有意思的特性表现,那就是黑色和其它元素进行混合的时候表现为透明。
于是我们要实现一个视频背景色透明的效果就很简单,只要把我们的视频背景色设置为黑色,同时设置如下CSS即可:
例如:
下面有一张底图:
然后还有一个下雨的视频(不播放请点击):
此时,我们把视频覆盖在素图上方,同时设置这个视频的混合模式为screen,则可以看到视频背景变成透明了,下雨的动效很好的在底图上面呈现,如下效果所示(不播放请点击)(实时渲染,非IE浏览器下有效果):
就这么简单!
在所有不需要兼容IE浏览器的项目中都可以使用。
相信你一定学到了这个技能TIPS!
二、结语
关于滤色screen的深入理解,可以参见这篇文章:“深入理解CSS mix-blend-mode滤色screen混合模式”。
预告,接下来两个星期文章会爆更,请做好准
这有个问题。首先用最单的办法是用CSS3 background-color:rgba(0,0,0,0.5)但这个兼容性你懂的。第二种就是他们说的这样了。这会让里面的文字一起透明。所以。办法是用两个层叠起来。