如何使用MASK实现视频弹幕人物遮罩过滤

这篇文章将为大家详细讲解有关如何使用MASK实现视频弹幕人物遮罩过滤，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

专注于为中小企业提供网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业海陵免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

简单的一个截图例子：

其实，这里是运用了 CSS 中的 MASK 属性实现的。

mask 简单用法介绍

之前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK[1]，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些  mask 的用法感到疑惑，可以再去看看。

这里只简单介绍下 mask 的基本用法：

最基本，使用 mask 的方式是借助图片，类似这样：

{     /* Image values */     mask: url(mask.png);                       /* 使用位图来做遮罩 */     mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */ }

当然，使用图片的方式后文会再讲。借助图片的方式其实比较繁琐，因为我们首先还得准备相应的图片素材，除了图片，mask 还可以接受一个类似  background 的参数，也就是渐变。

类似如下使用方法：

{     mask: linear-gradient(#000, transparent)                      /* 使用渐变来做遮罩 */ }

那该具体怎么使用呢?一个非常简单的例子，上述我们创造了一个从黑色到透明渐变色，我们将它运用到实际中，代码类似这样：

下面这样一张图片，叠加上一个从透明到黑色的渐变，

{     background: url(image.png) ;     mask: linear-gradient(90deg, transparent, #fff); }

应用了 mask 之后，就会变成这样：

这个 DEMO，可以先简单了解到 mask 的基本用法。

这里得到了使用 mask 最重要结论：添加了 mask 属性的元素，其内容会与 mask 表示的渐变的 transparent  的重叠部分，并且重叠部分将会变得透明。

值得注意的是，上面的渐变使用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff  纯色部分其实换成任意颜色都可以，不影响效果。

CodePen Demo -- 使用 MASK 的基本使用[2]

使用 mask 实现人物遮罩过滤

了解了 mask 的用法后，接下来，我们运用 mask，简单实现视频弹幕中，弹幕碰到人物，自动被隐藏过滤的例子。

首先，我简单的模拟了一个召唤师峡谷，以及一些基本的弹幕：

方便示意，这里使用了一张静态图，表示了召唤师峡谷的地图，并非真的视频，而弹幕则是一条一条的

元素，和实际情况一致。伪代码大概是这样：