經常看一些 LOL 比賽直播的小夥伴，肯定都知道，在一些彈幕網站（Bilibili、虎牙）中，當人物與彈幕出現在一起的時候，彈幕會“**巧妙**”的躲到人物的下面，看著非常的智慧。 簡單的一個截圖例子：  其實，這裡是運用了 CSS 中的 MASK 屬性實現的。 ## mask 簡單用法介紹 之前在多篇文章都提到了 mask，比較詳細的一篇是 -- [奇妙的 CSS MASK](https://github.com/chokcoco/iCSS/issues/80)，本文不對 mask 的基本概念做過多講解，向下閱讀時，如果對一些 mask 的用法感到疑惑，可以再去看看。 這裡只簡單介紹下 mask 的基本用法： 最基本，使用 mask 的方式是藉助圖片，類似這樣： ```CSS { /* Image values */ mask: url(mask.png); /* 使用點陣圖來做遮罩 */ mask: url(masks.svg#star); /* 使用 SVG 圖形中的形狀來做遮罩 */ } ``` 當然，使用圖片的方式後文會再講。藉助圖片的方式其實比較繁瑣，因為我們首先還得準備相應的圖片素材，除了圖片，mask 還可以接受一個類似 background 的引數，也就是漸變。 類似如下使用方法： ```CSS { mask: linear-gradient(#000, transparent) /* 使用漸變來做遮罩 */ } ``` 那該具體怎麼使用呢？一個非常簡單的例子，上述我們創造了一個從黑色到透明漸變色，我們將它運用到實際中，程式碼類似這樣： 下面這樣一張圖片，疊加上一個從透明到黑色的漸變， ```CSS { background: url(image.png) ; mask: linear-gradient(90deg, transparent, #fff); } ```  應用了 mask 之後，就會變成這樣：  這個 DEMO，可以先簡單瞭解到 mask 的基本用法。 這裡得到了使用 mask 最重要結論：**添加了 mask 屬性的元素，其內容會與 mask 表示的漸變的 transparent 的重疊部分，並且重疊部分將會變得透明。** 值得注意的是，上面的漸變使用的是 `linear-gradient(90deg, transparent, #fff)`，這裡的 `#fff` 純色部分其實換成任意顏色都可以，不影響效果。 [CodePen Demo -- 使用 MASK 的基本使用](https://codepen.io/Chokcoco/pen/YzwZbLQ) ## 使用 mask 實現人物遮罩過濾 瞭解了 mask 的用法後，接下來，我們運用 mask，簡單實現視訊彈幕中，彈幕碰到人物，自動被隱藏過濾的例子。 首先，我簡單的模擬了一個召喚師峽谷，以及一些基本的彈幕：  方便示意，這裡使用了一張靜態圖，表示了召喚師峽谷的地圖，並非真的視訊，而彈幕則是一條一條的 `

` 元素，和實際情況一致。虛擬碼大概是這樣： ```HTML 6666 ... 6666 ``` 為了模擬實際情況，我們再用一個 div 新增一個實際的人物，如果不做任何處理，其實就是我們看視訊開啟彈幕的感受，人物被視訊所遮擋：  注意，這裡我添加了一個人物亞索，並且用 animation 模擬了簡單的運動，在運動的過程中，人物是被彈幕給遮擋住的。 接下來，就可以請出 mask 了。 我們利用 mask 製作一個 `radial-gradient` ，使得人物附近為 `transparent`，並且根據人物運動的 animation，給 mask 的 `mask-position` 也新增上相同的 animation 即可。最終可以得到這樣的效果： ```CSS .g-barrage-container { position: absolute; mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%); animation: mask 10s infinite alternate; } @keyframes mask { 100% { mask-position: 85vw 0; } } ```  實際上就是給放置彈幕的容器，新增一個 `mask` 屬性，把人物所在的位置標識出來，並且根據人物的運動不斷的去變換這個 mask 即可。我們把 mask 換成 background，原理一看就懂。 ### 把 mask 替換成 background 示意圖：  background 透明的地方，即 mask 中為 transparent 的部分，實際就是彈幕會被隱藏遮罩的部分，而其他白色部分，彈幕不會被隱藏，正是完美的利用了 mask 的特性。 其實這項技術和視訊本身是無關的，我們只需要根據視訊計算需要遮蔽掉彈幕的位置，得到相應的 mask 引數即可。如果去掉背景和運動的人物，只保留彈幕和 mask，是這樣的：  **需要明確的是，使用 mask，不是將彈幕部分給遮擋住，而是利用 `mask`，指定彈幕容器之下，哪些部分正常展示，哪些部分透明隱藏**。 最後，完整的 Demo 你可以戳這裡： [CodePen Demo -- mask 實現彈幕人物遮罩過濾](https://codepen.io/Chokcoco/pen/MWbyjoX) ## 實際生產環境中的運用 當然，上面我們簡單的還原了利用 mask 實現彈幕遮罩過濾的效果。但是實際情況比上述的場景複雜的多，因為人物英雄的位置是不確定的，每一刻都在變化。所以在實際生產環境中，mask 圖片的引數，其實是由後端實時對視訊進行處理計算出來的，然後傳給前端，前端再進行渲染。 對於運用了這項技術的直播網站，我們可以審查元素，看到包裹彈幕的容器的 mask 屬性，每時每刻都在發生變化：  返回回來的其實是一個 SVG 圖片，大概長這個樣子：  這樣，根據視訊人物的實時位置變化，不斷計算新的 mask，再實時作用於彈幕容器之上，實現遮罩過濾。 ## 最後 本文到此結束，希望對你有幫助 :)，本文介紹了 CSS mask 的一個實際生產環境中，非常有意義的一次實踐，也表明很多新的 CSS 技術，運用得當，還是能給業務帶來非常有益的幫助的。 更多精彩 CSS 技術文章彙總在我的 [Github -- iCSS](https://github.com/chokcoco/iCSS) ，持續更新，歡迎點個 star 訂閱收藏。 如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望