問題場景

有一張主體部分為任意顏色，其余位置透明的png圖標(biāo)圖片，現(xiàn)在希望將這張圖片進(jìn)行重新著色。

最終效果

實現(xiàn)和解釋

CSS mask

mask這個詞應(yīng)該接觸過Adobe系列軟件（或者喜歡在PowerPoint里面玩騷操作）的同學(xué)都接觸過。它的概念很簡單，就是在最上層的圖層當(dāng)中挖一個洞，下面的圖層自然就可以透過這個洞展示出來了。

大部分現(xiàn)代瀏覽器（IE不支持）都支持mask聲明。不同的是，在Webkit內(nèi)核的瀏覽器（例如使用Chromium內(nèi)核的瀏覽器）當(dāng)中，需要顯式指明“-webkit-mask…”，瀏覽器才會接受這些聲明。在一些前端框架例如Vue.js當(dāng)中，可以通過 :src="{ maskImage：… }"來讓Vue決定是否應(yīng)該加上-webkit前綴。

一張png圖片能夠被用作mask的前提條件是圖片當(dāng)中必須含有透明部分（主體顏色不限）。如果圖片不透明，那么瀏覽器就會將圖片所占的矩形區(qū)域作為mask整體來使用，在這種情況下還不如直接指定節(jié)點(diǎn)的寬度和高度。在這種情況下，應(yīng)該使用復(fù)合背景并將“background-blend-mode”設(shè)置為“l(fā)ighten”（僅對主體顏色比目標(biāo)顏色深的圖片生效）。

在了解了這些過后，就可以使用“mask-image”來設(shè)置遮罩圖像了。

（以下css全部基于上面的html結(jié)構(gòu)）

——玩我是吧，阿婆？

——作為遮罩的圖像不會根據(jù)元素大小進(jìn)行適配，默認(rèn)是圖像的原本大小。就像指定其他圖片元素的寬度和高度一樣，也需要使用“(-webkit-)mask-size”來指定遮罩的大小。

——行，那給我來個64px的吧。

——如果遮罩尺寸小于元素尺寸，那么瀏覽器的默認(rèn)行為將會是重復(fù)（repeat）這一遮罩。

如果要避免的話，可以使用“no-repeat”來防止這個行為。但是我個人不太推薦這個用法，因為這代表著設(shè)計者自己對這個元素應(yīng)該顯示多大也不知道，要扣工資的。

zongjie

總結(jié)