CSS奇思妙想—使用 mask 实现视频弹幕人物遮罩过滤

最新推荐文章于 2025-02-06 07:05:26 发布

原创

最新推荐文章于 2025-02-06 07:05:26 发布 · 568 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

这篇博客介绍了如何利用CSS的mask属性在视频弹幕中实现人物遮罩过滤，通过创建透明区域使弹幕在人物出现时自动隐藏。文章通过实例演示了mask的基本用法，以及在实际生产环境中的应用，强调了mask技术在提升用户体验方面的价值。

使用 mask 实现视频弹幕人物遮罩过滤

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。

简单的一个截图例子：

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

mask 简单用法介绍

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

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

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

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

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

类似如下使用方法：

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

那该具体怎么使用呢？一个非常简单的例子，上述我们创造了一个从黑色

最低0.47元/天解锁文章