巧用CSS遮罩

1. 用法

-webkit-mask樣式是利用該屬性指定的圖片做爲遮罩，利用這張圖像的透明度來顯示位於該遮罩圖下方的圖像。若是遮罩圖某個像素點透明度爲1則顯示下方的圖像，透明度爲0則不顯示，介於0-1之間則呈現相應的透明度。
詳情參考 mask - CSS | MDN
能夠看到，mask的語法基本上拷貝自background，能夠設置遮罩的url, position, repeat, size等屬性，但不能直接設置顏色（純色的遮罩意味着用opacity就能實現）。-webkit-mask-url能夠設置gradients的漸變圖片，也能夠設置base64編碼的圖片。

2. 利用mask實現圖標變色

想讓圖標能夠任意變色，常見的方案有：font-awesome, SVG等，甚至還有drop-shadow。其實能夠利用background變色，而利用遮罩去繪製圖標。遮罩透過的地方是圖標的填色部分，而遮罩蓋過的地方則沒有顏色。
這種方法的優勢就是轉換成本極低，能夠直接利用已有的圖標PNG圖。具體方法以下：

• 將圖標保存爲PNG圖，注意非圖標區域應該是透明的。若是原有圖標是sprite圖，不要緊，不用變，由於mask支持position屬性。原先輸出的圖標不是純黑色的？也不要緊，由於mask樣式只認你圖片的透明通道

• 設置圖標的CSS，例如：

.m-mask{
    width:141px;
    height:141px;
    -webkit-mask-image: url(mask.png);
    background: #3f51b5;
}

• 這樣就行了，效果以下
  

徹底能夠把此時的background-color理解成Photoshop中的顏色疊加

若是結合less sass，就能夠作到自定義換膚了

3.利用mask修復圓角頭像的毛邊

在實際的開發過程當中，發如今較高版本的Chrome瀏覽器中，咱們的圓角頭像出現了沒法容忍的毛邊，定位到問題的緣由是這樣的：外層div利用background設置了墊底的默認圖，設置了border-radius:50%。而內層的img爲實際頭像圖，也設置了border-radius:50%。理論上兩個相等大小、相同圓角的元素，也未設置任何定位，那麼應該是頭像完整蓋着默認圖。但實際並未如此，而是頭像略小於默認圖，於是出現了毛邊。

所以咱們能夠爲外層div添加一個樣式

-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==')

url中設置的實際上是1像素高寬的黑色圖片，那麼此時的遮罩就至關於外層div設置圓角區域後的一個不透明的圓形。此時就能夠去掉img上的boder-radius了。最後效果以下，完美！