搜索

+

80

-

请问B站的弹幕怎么实现不挡住人物的？

html5 javascript css

请问B站的弹幕怎么实现不挡住人物的？

网友回复

+

0

-

通过设置-mask-image来实现，通过人工智能对视频画面生成一个人物alpha通道

例如：

800_auto

这样一个画面，生成的alpha通道

800_auto

最终通过mask-image来实现

800_auto

代码如下：

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

<head>
    <meta charset="UTF-8">

    <style>
        .video {

          position: relative;
          -webkit-mask-image: url("//repo.bfw.wiki/bfwrepo/images/movie/clipalpha.png");
          -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>
                <img src="//repo.bfw.wiki/bfwrepo/images/movie/movieclip.png" />
    </div>
</body>

</html>

我知道答案，我要回答

我有问题

私活外包

最新提问