巧用CSS遮罩

cocopeak 發布于2019-08-29 11:03 / 2907人閱讀

摘要：用法樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來顯示位于該遮罩圖下方的圖像。其實可以利用變色，而利用遮罩去繪制圖標。遮罩透過的地方是圖標的填色部分，而遮罩蓋過的地方則沒有顏色。

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了。最后效果如下，完美！

云服務器 GPU云服務器巧用CSS的MASK濾鏡 css遮罩巧用巧用云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111390.html

巧用CSS3：target 偽類制作Dropdown下拉菜單（無JS）

摘要：先上效果圖正如標題所說，本文是教你如何巧用偽類制作下拉菜單，原生，無。實際例子其實就是主題的右上角那個按鈕，你點一下就會有一個下拉菜單出現，在其他區域點擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉換原點。原文鏈接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...

littleGrow 2019-08-01 14:47 評論0 收藏0
巧用iframe做浮層

摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發現頁面是可以滑動的，理想的情況當然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。巧用iframe做浮層 iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發產品的時候，我們不得不舍棄一些東西來換取效率。我們的需求是，在某些特定...

kyanag 2019-08-20 16:35 評論0 收藏0
巧用iframe做浮層

摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發現頁面是可以滑動的，理想的情況當然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。巧用iframe做浮層 iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發產品的時候，我們不得不舍棄一些東西來換取效率。我們的需求是，在某些特定...

VishKozus 2019-08-01 16:50 評論0 收藏0
有趣的交互系列 - 文字遮罩入場效果

摘要：在這個系列里分享一些簡單，但是很有意思的交互效果附上地址和地址滾動，添加對應加載的比如巧用實現文字和遮罩層的動畫效果文字動畫遮罩層動畫首先然后把且，這樣就實現了遮罩層的進場和退出效果隨機獲取數組項在這個系列里分享一些簡單，但是很有意思的交互效果~附上demo地址和github地址 showImg(https://makapicture.oss-cn-beijing.aliyuncs....

鄒強 2019-08-02 15:13 評論0 收藏0