亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

巧用CSS遮罩

cocopeak / 2991人閱讀

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

1. 用法

-webkit-mask樣式是利用該屬性指定的圖片作為遮罩，利用這張圖像的透明度來顯示位于該遮罩圖下方的圖像。如果遮罩圖某個(gè)像素點(diǎn)透明度為1則顯示下方的圖像，透明度為0則不顯示，介于0-1之間則呈現(xiàn)相應(yīng)的透明度。
詳情參考 mask - CSS | MDN
可以看到，mask的語法基本上拷貝自background，可以設(shè)置遮罩的url, position, repeat, size等屬性，但不能直接設(shè)置顏色（純色的遮罩意味著用opacity就能實(shí)現(xiàn)）。-webkit-mask-url可以設(shè)置gradients的漸變圖片，也可以設(shè)置base64編碼的圖片。

2. 利用mask實(shí)現(xiàn)圖標(biāo)變色

想讓圖標(biāo)可以任意變色，常見的方案有：font-awesome, SVG等，甚至還有drop-shadow。其實(shí)可以利用background變色，而利用遮罩去繪制圖標(biāo)。遮罩透過的地方是圖標(biāo)的填色部分，而遮罩蓋過的地方則沒有顏色。
這種方法的優(yōu)點(diǎn)就是轉(zhuǎn)換成本極低，可以直接利用已有的圖標(biāo)PNG圖。具體方法如下：

將圖標(biāo)保存為PNG圖，注意非圖標(biāo)區(qū)域應(yīng)該是透明的。如果原有圖標(biāo)是sprite圖，沒關(guān)系，不用變，因?yàn)閙ask支持position屬性。原先輸出的圖標(biāo)不是純黑色的？也沒關(guān)系，因?yàn)閙ask樣式只認(rèn)你圖片的透明通道

設(shè)置圖標(biāo)的CSS，例如：

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

這樣就好了，效果如下

完全可以把此時(shí)的background-color理解成Photoshop中的顏色疊加

如果結(jié)合less sass，就可以做到自定義換膚了

3.利用mask修復(fù)圓角頭像的毛邊

在實(shí)際的開發(fā)過程中，發(fā)現(xiàn)在較高版本的Chrome瀏覽器中，我們的圓角頭像出現(xiàn)了無法容忍的毛邊，定位到問題的原因是這樣的：外層div利用background設(shè)置了墊底的默認(rèn)圖，設(shè)置了border-radius:50%。而內(nèi)層的img為實(shí)際頭像圖，也設(shè)置了border-radius:50%。理論上兩個(gè)相等大小、相同圓角的元素，也未設(shè)置任何定位，那么應(yīng)該是頭像完整蓋著默認(rèn)圖。但實(shí)際并未如此，而是頭像略小于默認(rèn)圖，因而出現(xiàn)了毛邊。

因此我們可以為外層div添加一個(gè)樣式

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

url中設(shè)置的其實(shí)是1像素高寬的黑色圖片，那么此時(shí)的遮罩就相當(dāng)于外層div設(shè)置圓角區(qū)域后的一個(gè)不透明的圓形。此時(shí)就可以去掉img上的boder-radius了。最后效果如下，完美！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111390.html

相關(guān)文章

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

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

    littleGrow 評論0 收藏0

  • 巧用iframe做浮層

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

    kyanag 評論0 收藏0

  • 巧用iframe做浮層

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

    VishKozus 評論0 收藏0

  • 有趣的交互系列 - 文字遮罩入場效果

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

    鄒強(qiáng) 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<