经常看一些LOL游戏直播的朋友一定知道，在一些弹幕网站（哔哩哔哩、虎牙），当角色和弹幕一起出现时，弹幕会“巧妙地”隐藏在下面人物，看起来很聪明。一个简单的截图例子：其实这是通过CSS中的MASK属性实现的。在介绍mask的简单用法之前，很多文章都提到了mask。更详细的是——精彩的CSSMASK[1]。本文不过多解释mask的基本概念。如果您对用法感到困惑，可以去看看。这里只是简单介绍一下mask的基本用法：mask最基本的使用方式就是使用图片，像这样：{/*Imagevalues*/mask:url(mask.png);/*使用位图作为图片mask*/mask:url(masks.svg#star);/*使用SVG图形中的shape做mask*/}当然，图片的使用方式后面会讲到。图片的使用方式其实还是比较繁琐的，因为我们要先准备好相应的图片素材。除了图片，mask还可以接受一个类似于background的参数，那就是gradient。类似于下面的使用方法：{mask:linear-gradient(#000,transparent)/*使用渐变做一个mask*/}如何使用呢？一个很简单的例子，上面我们创建了一个从黑色到透明的渐变色，我们在实践中使用，代码类似这样：下图叠加了一个从透明到黑色的渐变，{background:url(image.png);mask:linear-gradient(90deg,transparent,#fff);}应用mask后会变成这样：在这个DEMO中，你可以简单了解mask的基本用法。使用遮罩最重要的结论来了：添加了遮罩属性的元素，其内容会与遮罩所代表的渐变的透明部分重叠，重叠部分会变成透明。值得注意的是，上面的渐变使用的是linear-gradient(90deg,transparent,#fff)，这里的#fff纯色部分其实可以换成任何颜色都不影响效果。CodePenDemo--MASK的基本使用[2]使用mask实现字符蒙版过滤了解了mask的用法之后，接下来我们使用mask来简单实现一下，在视频弹幕中，当弹幕碰到一个字符时，会自动隐藏和过滤的例子。首先，我简单模拟了一个召唤师峡谷和一些基本的弹幕：为了方便，这里使用了一张静态图片，展示了召唤师峡谷的地图，不是真实的视频，而且弹幕是一个一个的元素，一致与实际情况。伪代码大概是这样的：
