今天，要介紹一種基于 CSS mask-composite 的高級(jí)技巧。

通過掌握它，我們可以通過一張 圖片，得到關(guān)于它的各種變換，甚至乎，得到各種不同顏色的變換。

通過單張 PNG/SVG 得到它的反向切圖

事情的經(jīng)過是這樣的，某天，我們拿到了這樣一張 PNG/SVG 圖片：

這是一張PNG圖，灰色部分透明。

就這張圖片而言，它是一張 PNG 圖，灰色部分透明。

隨著需求的進(jìn)行，在某一處，我們需要一張基于上述圖形的反向鏤空?qǐng)D形：

emmm，要注意，這里白色處是需要透明的，要能透出不同的背景色，像是這樣：

怎么辦呢，通常而言，只能是找 UI 再出一張鏤空?qǐng)D。

當(dāng)然，在今天，只需要一張 PNG/SVG，我們就可以使用 CSS 輕松完成上述的轉(zhuǎn)換。這里我們需要用到 mask-composite。

何為 mask-composite？

那么，何為 mask-composite，當(dāng)然，現(xiàn)階段還需要加上瀏覽器前綴，-webkit-mask-composite。

首先，要學(xué)會(huì)使用 mask-composite，得先知道 CSS 中另外一個(gè)非常重要且有用的屬性 -- mask。

如果，你對(duì) mask 還比較陌生，建議你先看看這篇 -- 奇妙的 CSS MASK[1]。

在運(yùn)用 mask 對(duì)圖片進(jìn)行遮罩切割處理的同時(shí)，我們可以同時(shí)再運(yùn)用到 mask-composite 屬性。這個(gè)是非常有意思的元素。

-webkit-mask-composite[2]: 屬性指定了將應(yīng)用于同一元素的多個(gè)蒙版圖像相互合成的方式。

通俗點(diǎn)來說，他的作用就是，當(dāng)一個(gè)元素存在多重 mask 時(shí)，我們就可以運(yùn)用 -webkit-mask-composite 進(jìn)行效果疊加。

舉個(gè)栗子：

<div class="original"></div>

.original {
    background: #000;
    mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

我們用一個(gè) radial-gradient 作為 mask，切割原本的矩形，得到一個(gè)新的圖形。

如果再換一個(gè)方向：

<div class="original"></div>

.original {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}

如果我想得到這樣一個(gè)效果：

該怎么做呢？

我們嘗試合并上述兩個(gè) mask 的效果：

.mask {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
        radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

效果如下：

與我們想象的不太一樣，這是因?yàn)椋瑑蓚€(gè) mask 的圖形疊加，就是上述圖形的效果，所以上述效果是沒有問題的。

只是，我們想得到的是兩個(gè) mask 圖形的重疊部分：

這時(shí)，我們就可以使用 mask-composite：

.mask {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
        radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
    -webkit-mask-composite: source-in;
}

添加了 -webkit-mask-composite: source-in 后，我們就可以得到兩個(gè) mask 圖形的重疊部分，再基于這個(gè)重疊部分作用到整個(gè) mask 遮罩：

CodePen Demo -- mask-composite Demo[3]。

-webkit-mask-composite 還可以實(shí)現(xiàn)非常多不同的功能，包括但不限于：

-webkit-mask-composite: clear; /*清除，不顯示任何遮罩*/
-webkit-mask-composite: copy; /*只顯示上方遮罩，不顯示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只顯示重合的地方*/
-webkit-mask-composite: source-out; /*只顯示上方遮罩，重合的地方不顯示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只顯示重合的地方*/
-webkit-mask-composite: destination-out;/*只顯示下方遮罩，重合的地方不顯示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只顯示不重合的地方*/

看看這張圖，就一目了然（圖片源自 CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果[4]）。

使用 -webkit-mask-composite 實(shí)現(xiàn)圖片的擴(kuò)展

基于上述的知識(shí)鋪墊，回到我們的主題，在我們有了一張透明圖片（PNG/SVG）之后，我們可以輕松的利用 -webkit-mask-composite 得到它的反向鏤空?qǐng)D：

.mask {
    background: #000;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: exclude;
}

不僅如此，我們還可以利用這個(gè)技巧，使用圖片本身作為 mask 遮罩，配合 -webkit-mask-composite，從而將一張純色圖片，擴(kuò)展到各類不同顏色，甚至是漸變色！

<div class="original"></div>
<div class="mask"></div>
<div class="mask-color"></div>
<div class="mask-gradient"></div>

.original {
    background: url($img);
    background-size: cover;
}
.mask {
    background: #000;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: exclude;
}
.mask-color {
    background: green;
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: source-in;
}
.mask-gradient {
    background: linear-gradient(blue, yellowgreen);
    mask: 
        url($img),
        linear-gradient(#fff, #000);
    mask-composite: source-in;
}

效果如下：

CodePen Demo -- Power of mask-composite[5]。

這樣，僅僅是利用一張 PNG/SVG 原圖，我們就可以得到它的。

1. 反向鏤空?qǐng)D
2. 其他純色圖
3. 漸變色圖

可以有效的節(jié)省圖片資源，起到一定的優(yōu)化效果！

在之前，我也寫過一種基于白底黑圖的任意顏色轉(zhuǎn)換，但是存在非常大的局限性：兩行 CSS 代碼實(shí)現(xiàn)圖片任意顏色賦色技術(shù)[6]，但是今天這個(gè)技巧是純粹的，對(duì)原圖沒有要求的任意色彩轉(zhuǎn)換！

當(dāng)然，唯一的缺點(diǎn)，目前會(huì)受限于 mask-composite 和 -webkit-mask-composite 的兼容性，而且兩者的語法存在一定的差異，實(shí)際使用的話需要注意。根據(jù)業(yè)務(wù)場(chǎng)景靈活選擇。

最后

非常有意思的一個(gè)技巧，你學(xué)會(huì)了嗎？本文到此結(jié)束，希望對(duì)你有幫助 :)

參考資料

[1]奇妙的 CSS MASK: https://github.com/chokcoco/iCSS/issues/80。

[2]-webkit-mask-composite: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite。

[3]CodePen Demo -- mask-composite Demo: https://codepen.io/Chokcoco/pen/KKQjxMP。

[4]CSS mask 實(shí)現(xiàn)鼠標(biāo)跟隨鏤空效果: https://segmentfault.com/a/1190000040996523。

[5]CodePen Demo -- Power of mask-composite: https://codepen.io/Chokcoco/pen/YzaKLEr。

[6]兩行 CSS 代碼實(shí)現(xiàn)圖片任意顏色賦色技術(shù): https://github.com/chokcoco/iCSS/issues/32。