“我报名1期考验——刮分10万奖励池，这就是我的第1一篇文章，查看更多活动规则”
那一天在B站看视频时意外发现当外挂字幕碰到角色时就被剪切了，不容易遮挡角色，感觉很特别，便决定一探究竟。
高档的实际效果，通常只需要采用最朴实无华的控制方式，忙活了两小时，陈师傅开启了F12，恍然大悟。一张图片 一个特性，立即解决。
因为证实我的看法，我打算自身写一个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>
实际效果是这样子的
加一个红背景，看得清晰一些
到此大家就实现了B站同款不遮挡人物视频弹幕。对于这个图片是从哪里来的，一定是AI识别出来随后产生的，一张图片可能就一两K，一次载入许多张也不容易造成极大的压力。
最终一起来看看这一奇妙的css属性吧
developer.mozilla.org/zh-CN/docs/…
Experimental: 这是一个试验里的作用
因此在研发需求的时候也可以把它当做一个闪光点应用，但不能强依赖于这一特性做要求。
它还有着一系列的特性，有兴趣的话可以逐个试一下。
