css 实现视频人物不被弹幕遮挡

蓓蕾心晴

发布于 2022-11-16 13:01:55

4940

发布于 2022-11-16 13:01:55

文章被收录于专栏：前端小叙前端小叙

背景

在视频平台看剧的时候，总会发现各家都已实现在有人物出现的时候，弹幕会藏在背后的情况，关键是，虽然弹幕被藏在背后，但是点击被遮挡的弹幕位置依然可以点赞成功，真是感觉特别神奇。

网上找到了一个网友发的解决方案，感觉基本符合需求，但是具体各家怎么实现的还待探究。

参考链接

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 会发生跨域问题，但 background-image 不会 */
      /* mask-image: url("./mask.gif");
      -webkit-mask-image: url("./mask.gif"); */
      /* 取值是渐变色，但是没有生效 */
      /* mask-image:linear-gradient(blue, pink);
      -webkit-mask-image:linear-gradient(blue, pink); */
      /* 最好使用 base64 来解决 */
      mask-image:url("https://img-blog.csdn.net/20170701221732018");
      -webkit-mask-image:url("https://img-blog.csdn.net/20170701221732018");
      mask-size: 668px 376px;
      -webkit-mask-size: 668px 376px;
    }
    .bullet {
      position: absolute;
      font-size: 20px;
      color:pink;
    }
  </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>
<script>
  let video = document.getElementsByClassName("video")[0];
  video.addEventListener("click",(e)=>{
    console.log("给当前点击弹幕点赞",e.target)
    e.target.style.color = "red"
  },false)
</script>
</body>
</html>

此种方案主要的实现原理是，通过AI 算法生成遮罩蒙层图，css 再通过 -webkit-mask-image 来设置后实现，而且该方法，确实支持被蒙层遮住的地方依然可以点击。

该属性目前仅支持 -webkit 内核浏览器。

该属性的应用：解决png 图片过大，使用蒙层结合jpg 来实现 png 想要实现的部门区域背景透明效果。