2行代码带你实现B站防遮挡字幕～

不二如是 · 发表于 2022-10-24 16:54:09

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2022-10-25 11:49 编辑

在线视频：

经常玩 B 站的鱼油兄弟们，应该都看过这种防挡字幕吧：

当字幕遇到人物的时候就被裁切了，不会挡住人物～

到底是如何实现的呢？

没错，就是小师妹经常玩的“换脸”技术：深度学习

通过深度学习提取出来每一帧的蒙版文件。

然后 B 站服务器基于这种蒙版文件，隐藏这个区域里所有的弹幕，把蒙版之外的画面内容显示出来。

炼丹这部分，都是靠后台玩命跑，显卡越厉害，“炼丹”也就是计算机学习过程就更快。

高端的效果，往往也有最朴素的平替方式～～

学过小甲鱼老师 Web 课程的鱼油，应该会知道一个东东：“遮罩”

遮挡部分图像内容，并显示特定区域的图像内容，相当于一个窗口。

在 CSS 中通过 mask-image 属性可以实现指定遮罩使用的图片资源，默认值是 none，也就是无遮罩图片。

linus 大神说过一句话：

Talk is cheap. Show me the code.

好，那我们上代码，事先准备好一张将人物扣除的图片素材。

懒得抠图的可以去简介传送门领同款：

FishC.png.zip (164.17 KB, 下载次数: 1)

创建一个基础的 html 页面。

然后创建一个 div 表示 FishcVedio 表示视频区域，通过 css 属性加载一张将人物扣除的素材：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鱼C-弹幕</title>
    <style>
        .FishcVedio {
            position: relative;
        }

    </style>
</head>

<body>
    <div class="FishcVedio">
    </div>
</body>

</html>

接着在 div 元素中创建 3 个 p 元素表示我们的弹幕：

<p class="bulletChat" style="left:0; top: 0;"> 我爱Web开发我爱小甲鱼ilovefishc.com</p>
        <p class="bulletChat" style="left: 200px; top: 20px;">Lorem ipsum dolor sit amet consectetur adipisicing
            elit.
            Fugiat voluptatibus officia voluptatem nobis earum quod possimus dolorem animi atque vel deserunt,
            quidem
            ipsa, obcaecati dolore repudiandae eveniet veniam repellendus qui?</p>
        <p class="bulletChat" style="left: 200px; top: 60px; color: white;">哈哈哈哈哈哈哈，字幕防遮挡原来这么简单，嘻嘻嘻嘻嘻嘻嘻嘻嘻～～</p>

因为父元素设置为相对定位，那么这些 p 元素设置为绝对定位，就可以脱离文档流，浮动出来，字体大小设置为 22px 吧：

        .bulletChat {
            position: absolute;
            font-size: 20px;
        }

重点来了，通过使用 mask-image 属性来设置 div 元素为遮罩。

注意该属性还是实验中的功能(传送门)，所以使用时要加上前缀 -webkit- 或者 -moz-。

如果鱼油们用的 Chrome 或者 Safari 就用前者，fireFox 用后者。

通过 -webkit-mask-image 来加载我们准备好的图片，并设置宽高 666px：

            width: 666px;
            height: 666px;
            -webkit-mask-image: url("FishC.png");

再通过 -webkit-mask-size 属性设置遮罩宽高也是 666px：

-webkit-mask-size: 666px 666px;

搞定运行，怎么没效果？

加个背景色看看～

搞定！

mask-image 遮罩所支持的图片类型非常的广泛，可以是 url() 静态图片资源，格式包括 JPG，PNG 以及 SVG 等都是支持的

也可以是动态生成的图片，例如使用各种 CSS3 渐变绘制的图片。

因此理论上，使用 mask-image 我们可以遮罩出任意我们想要的图形，非常强大。

所以说，学会 CSS3 还是非常有必要的！

hornwong · 发表于 2022-10-24 17:30:53

编程追风梦 · 发表于 2022-10-24 18:52:48

可以，这个厉害，就是不知道能不能制作桌面版

Jinvador · 发表于 2022-10-24 19:21:46

强强强

yuan源儿 · 发表于 2022-10-25 14:40:31

账号		自动登录	找回密码
密码			立即注册

[技术交流] 2行代码带你实现B站防遮挡字幕～

马上注册，结交更多好友，享用更多功能^_^