弹幕不遮挡人物效果实现

在 B 站看视频的时候发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇。

 实现方式（一张图片+一个属性，搞定）

• 一行css代码：

mask-image: url(img/head.png);

• 为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式： 

-webkit-mask-image: url(img/head.png);
-moz-mask-image: url(img/head.png);
-ms-mask-image: url(img/head.png);
-o-mask-image: url(img/head.png);

• 一张图片：

 

 具体demo实现：

  
    
    
  
  
  
    

      

        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      
      

        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      
      

        高端的效果，往往只需要采用最朴素的实现方式。一张图片+一个属性，直接搞定
      
    
  

• 实现效果图

至此我们就实现了不遮挡人物的弹幕。至于这张图片是怎么来的，肯定是 AI 识别出来然后生成的。

点击查看这个神奇的 css 属性吧