高階切圖技巧!基於單張圖片的任意顏色轉換

chokcoco發表於2022-07-11

今天,要介紹一種基於 CSS mask-composite 的高階技巧。

通過掌握它,我們可以通過一張 圖片,得到關於它的各種變換,甚至乎,得到各種不同顏色的變換。

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

事情的經過是這樣的,某天,我們拿到了這樣一張 PNG/SVG 圖片:

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

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

隨著需求的進行,在某一處,我們需要一張基於上述圖形的反向鏤空圖形:

emmm,要注意,這裡白色處是需要透明的,要能透出不同的背景色,像是這樣:

怎麼辦呢,通常而言,只能是找 UI 再出一張鏤空圖。

當然,在今天,只需要一張 PNG/SVG,我們就可以使用 CSS 輕鬆完成上述的轉換。這裡我們需要用到 mask-composite

何為 mask-composite

那麼,何為 mask-composite,當然,現階段還需要加上瀏覽器字首,-webkit-mask-composite

首先,要學會使用 mask-composite,得先知道 CSS 中另外一個非常重要且有用的屬性 -- mask

如果,你對 mask 還比較陌生,建議你先看看這篇 -- 奇妙的 CSS MASK

在運用 mask 對圖片進行遮罩切割處理的同時,我們可以同時再運用到 mask-composite 屬性。這個是非常有意思的元素。

-webkit-mask-composite: 屬性指定了將應用於同一元素的多個蒙版影像相互合成的方式。

通俗點來說,他的作用就是,當一個元素存在多重 mask 時,我們就可以運用 -webkit-mask-composite 進行效果疊加。

舉個例子:

<div class="original"></div>
.original {
    background: #000;
    mask: radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px);
}

我們用一個 radial-gradient 作為 mask,切割原本的矩形,得到一個新的圖形。

如果再換一個方向:

<div class="original"></div>
.original {
    background: #000;
    mask: radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px);
}

如果我想得到這樣一個效果:

該怎麼做呢?

我們嘗試合併上述兩個 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);
}

效果如下:

與我們想象的不太一樣,這是因為,兩個 mask 的圖形疊加,就是上述圖形的效果,所以上述效果是沒有問題的。

只是,我們想得到的是兩個 mask 圖形的重疊部分:

這時,我們就可以使用 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 後,我們就可以得到兩個 mask 圖形的重疊部分,再基於這個重疊部分作用到整個 mask 遮罩:

CodePen Demo -- mask-composite Demo

-webkit-mask-composite 還可以實現非常多不同的功能,包括但不限於:

-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 實現滑鼠跟隨鏤空效果

使用 -webkit-mask-composite 實現圖片的擴充套件

基於上述的知識鋪墊,回到我們的主題,在我們有了一張透明圖片(PNG/SVG)之後,我們可以輕鬆的利用 -webkit-mask-composite 得到它的反向鏤空圖:

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

不僅如此,我們還可以利用這個技巧,使用圖片本身作為 mask 遮罩,配合 -webkit-mask-composite,從而將一張純色圖片,擴充套件到各類不同顏色,甚至是漸變色!

<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

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

  1. 反向鏤空圖
  2. 其他純色圖
  3. 漸變色圖

可以有效的節省圖片資源,起到一定的優化效果!

在之前,我也寫過一種基於白底黑圖的任意顏色轉換,但是存在非常大的侷限性:兩行 CSS 程式碼實現圖片任意顏色賦色技術但是今天這個技巧是純粹的,對原圖沒有要求的任意色彩轉換

當然,唯一的缺點,目前會受限於 mask-composite-webkit-mask-composite 的相容性,而且兩者的語法存在一定的差異,實際使用的話需要注意。根據業務場景靈活選擇。

最後

非常有意思的一個技巧,你學會了嗎?本文到此結束,希望對你有幫助 :)

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

相關文章