資訊專欄INFORMATION COLUMN
摘要：用法樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來顯示位于該遮罩圖下方的圖像。其實可以利用變色，而利用遮罩去繪制圖標。遮罩透過的地方是圖標的填色部分，而遮罩蓋過的地方則沒有顏色。
1. 用法
-webkit-mask樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來顯示位于該遮罩圖下方的圖像。如果遮罩圖某個像素點透明度為1則顯示下方的圖像，透明度為0則不顯示，介于0-1之間則呈現(xiàn)相應(yīng)的透明度。
詳情參考 mask - CSS | MDN
可以看到，mask的語法基本上拷貝自background，可以設(shè)置遮罩的url, position, repeat, size等屬性，但不能直接設(shè)置顏色（純色的遮罩意味著用opacity就能實現(xiàn)）。-webkit-mask-url可以設(shè)置gradients的漸變圖片，也可以設(shè)置base64編碼的圖片。
想讓圖標可以任意變色，常見的方案有：font-awesome, SVG等，甚至還有drop-shadow。其實可以利用background變色，而利用遮罩去繪制圖標。遮罩透過的地方是圖標的填色部分，而遮罩蓋過的地方則沒有顏色。
這種方法的優(yōu)點就是轉(zhuǎn)換成本極低，可以直接利用已有的圖標PNG圖。具體方法如下：
將圖標保存為PNG圖，注意非圖標區(qū)域應(yīng)該是透明的。如果原有圖標是sprite圖，沒關(guān)系，不用變，因為mask支持position屬性。原先輸出的圖標不是純黑色的？也沒關(guān)系，因為mask樣式只認你圖片的透明通道
設(shè)置圖標的CSS，例如：
.m-mask{
width:141px;
height:141px;
-webkit-mask-image: url(mask.png);
background: #3f51b5;
}
這樣就好了，效果如下
完全可以把此時的background-color理解成Photoshop中的顏色疊加
如果結(jié)合less sass，就可以做到自定義換膚了
在實際的開發(fā)過程中，發(fā)現(xiàn)在較高版本的Chrome瀏覽器中，我們的圓角頭像出現(xiàn)了無法容忍的毛邊，定位到問題的原因是這樣的：外層div利用background設(shè)置了墊底的默認圖，設(shè)置了border-radius:50%。而內(nèi)層的img為實際頭像圖，也設(shè)置了border-radius:50%。理論上兩個相等大小、相同圓角的元素，也未設(shè)置任何定位，那么應(yīng)該是頭像完整蓋著默認圖。但實際并未如此，而是頭像略小于默認圖，因而出現(xiàn)了毛邊。
因此我們可以為外層div添加一個樣式
-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==")
url中設(shè)置的其實是1像素高寬的黑色圖片，那么此時的遮罩就相當(dāng)于外層div設(shè)置圓角區(qū)域后的一個不透明的圓形。此時就可以去掉img上的boder-radius了。最后效果如下，完美！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111390.html
摘要：先上效果圖正如標題所說，本文是教你如何巧用偽類制作下拉菜單，原生，無。實際例子其實就是主題的右上角那個按鈕，你點一下就會有一個下拉菜單出現(xiàn)，在其他區(qū)域點擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉(zhuǎn)換原點。 原文鏈接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...
摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發(fā)現(xiàn)頁面是可以滑動的，理想的情況當(dāng)然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。 巧用iframe做浮層 iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發(fā)產(chǎn)品的時候，我們不得不舍棄一些東西來換取效率。 我們的需求是，在某些特定...
摘要：巧用做浮層的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。做的過程發(fā)現(xiàn)頁面是可以滑動的，理想的情況當(dāng)然是鎖住頁面。父頁面域名白名單子頁面好了，完成這樣的需求，半天都不用。用雖然不是最好的方案，但對于本案例來是最佳的。 巧用iframe做浮層 iframe的詬病太多了，還好標準沒有廢棄它，其實還是有點用的。在開發(fā)產(chǎn)品的時候，我們不得不舍棄一些東西來換取效率。 我們的需求是，在某些特定...
摘要：在這個系列里分享一些簡單，但是很有意思的交互效果附上地址和地址滾動，添加對應(yīng)加載的比如巧用實現(xiàn)文字和遮罩層的動畫效果文字動畫遮罩層動畫首先然后把且，這樣就實現(xiàn)了遮罩層的進場和退出效果隨機獲取數(shù)組項 在這個系列里分享一些簡單，但是很有意思的交互效果~附上demo地址和github地址 showImg(https://makapicture.oss-cn-beijing.aliyuncs....
閱讀 2837·2021-11-22 15:11
閱讀 3559·2021-09-28 09:43
閱讀 2906·2019-08-30 13:05
閱讀 3445·2019-08-30 11:18
閱讀 1458·2019-08-29 16:34
閱讀 1319·2019-08-29 13:53
閱讀 2922·2019-08-29 11:03
閱讀 1673·2019-08-29 10:57
