不遮擋人物彈幕是怎么實現的——圖片蒙版效果-webkit-mask

這是一個實驗中的功能，用於設置元素上遮罩層的圖像。

一、Values

none：默認值，透明的黑色圖像層，也就是沒有遮罩層。

<mask-source>：<mask>或CSS圖像的url<image>圖片作為遮罩層

二、語法：

.demo1 {
    background : url("images/logo.png") no-repeat;
    -webkit-mask : url("images/mask.png");
}

三、效果圖：

 mask.png中黑色部分的透明度（alpha）值為1，將完全顯示其下方的圖片區域，而其余部分的透明度為0（alpha值），將完全覆蓋其下方的圖片區域。

 

四、騰訊視頻不遮擋人物彈幕是怎么實現的：

大家都看過彈幕，既能看劇又能看好玩的彈幕，就得用這種不遮擋人物的彈幕，如下圖（Chrome瀏覽器效果），騰訊視頻用的就是-webkit-mask屬性來實現的。

 

Network面板里可以看到在不停加載遮罩圖像，說明是后端通過一定算法識別得到svg遮罩，返回的svg預覽圖像如下（前端怎么得到的圖片的base64碼就不知道了，可能是Semantic Segmentation（語義分割））：

所以彈幕在經過白色部分時不能被顯示出來，黑色部分可以。

但是現在還有很多瀏覽器不支持mask，比如同樣的視頻內容在edge瀏覽器上的效果如下圖：

官網：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

參考：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/