微信可以设置动态视频透明壁纸了 微信如何设置动态视频透明壁纸

html-css010

微信可以设置动态视频透明壁纸了 微信如何设置动态视频透明壁纸,第1张

可以利用一些app来达到效果，以biu视频桌面为例：

1、打开biu视频桌面，在软件首页中找到的微信透明皮肤。

2、找到透明皮肤选项，这里点击这个按钮。

3、首先系统需要默认设置开启权限，点击设置按钮。

4、找到biu视频，点开后选项允许出现在其它应用上。

5、回到刚才页面，点击下一步按钮选项。

6、进入壁纸后首先需要开启权限，点击去开启。

7、找到biu,允许访问使用记录的开关将其打开。

8、设置透明度，选项QQ还是微信，点击下面的下载设置透明皮肤。

9、系统自动线下载完以后需要点击设为透明皮肤按钮。

10、选择有声模式还是无声模式，选择无声模式，返回微信就设置完成了。

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

有！

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

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

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

例如：

下面有一张底图：

然后还有一个下雨的视频（不播放请点击）：

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

就这么简单！

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

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

二、结语

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

预告，接下来两个星期文章会爆更，请做好准