相信小伙伴们逛B站的时候都见到过B站的字幕可以不遮挡人物的效果。
那么B站到底是如何实现这么神奇的效果的呢？经过一番摸索最终发现了其中的奥秘
主要是通过一行CSS属性mask-image:设置了一张图片为做元素的蒙版，使用人形图片遮挡住了弹幕
实践出真知：上demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.video {
width: 668px;
height: 376px;
position: relative;
-webkit-mask-image: url("mask.svg");
-webkit-mask-size: 668px 376px;
}
.bullet {
position: absolute;
font-size: 20px;
}
</style>
</head>
<body>
<div class="video">
<div class="bullet" style="left: 100px; top: 0;">元芳，你怎么看</div>
<div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
<div class="bullet" style="left: 300px; top: 40px;">你好，我是胖灵</div>
<div class="bullet" style="left: 400px; top: 60px;">这是第一集，还没有舔灵</div>
</div>
</body>
</html>
效果图：
加个红色背景效果更明显一些：
那么这种图片是怎么来的呢？
这应该用到了AI识别视频人物的算法，可以自动检测视频中的人物、物体和其他重要区域，然后根据它们的运动轨迹进行弹幕屏蔽。
具体来说，B站的弹募播放器使用计算机视觉算法对视频中的每一帧进行分析，提取人物、物体等的边缘特征和运动信息，然后根据这些信息计算出它们的运动轨迹。当弹幕出现在视频的特定区域时，播放器会根据这些运动轨迹动态地调整弹幕的显示位置，以避免弹幕挡住视频中的人物、物体等重要信息。
当然mask不止有image这一个属性，还有如border、clip等等，感兴趣的话可以都了解一下