2行代码带你实现B站防遮挡字幕～
本帖最后由 不二如是 于 2022-10-25 11:49 编辑在线视频：
https://www.bilibili.com/video/BV1jD4y1k7hu
经常玩 B 站的鱼油兄弟们，应该都看过这种防挡字幕吧：
当字幕遇到人物的时候就被裁切了，不会挡住人物～
到底是如何实现的呢？
没错，就是小师妹经常玩的“换脸”技术：深度学习
https://www.bilibili.com/video/BV1Nb4y1x7ja/
通过深度学习提取出来每一帧的蒙版文件。
然后 B 站服务器基于这种蒙版文件，隐藏这个区域里所有的弹幕，把蒙版之外的画面内容显示出来。
炼丹这部分，都是靠后台玩命跑，显卡越厉害，“炼丹”也就是计算机学习过程就更快。
高端的效果，往往也有最朴素的平替方式～～
学过小甲鱼老师 Web 课程的鱼油，应该会知道一个东东：“遮罩”
遮挡部分图像内容，并显示特定区域的图像内容，相当于一个窗口。
在 CSS 中通过 mask-image 属性可以实现指定遮罩使用的图片资源，默认值是 none，也就是无遮罩图片。
linus 大神说过一句话：
Talk is cheap. Show me the code.
好，那我们上代码，事先准备好一张将人物扣除的图片素材。
懒得抠图的可以去简介传送门领同款：
创建一个基础的 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 还是非常有必要的！
{:5_108:} 可以，这个厉害，就是不知道能不能制作桌面版 强强强
666
页:
[1]