兩行 CSS 代碼實現圖片任意顏色賦色技術

好久以前在張鑫旭大大的博客看到過一篇 PNG格式小圖標的CSS任意顏色賦色技術，當時驚爲天人，感慨還能夠這樣玩，私底下也曾屢次想過有沒有其餘方法能夠實現，又或者不只僅侷限於 PNG 圖片。

  

mix-blend-mode 與 background-blend-mode

mix-blend-mode 在我以前的一篇文章初略介紹過 -- 難以想象的混合模式 mix-blend-mode，與本文的主角 background-blend-mode 同樣，都是實現混合模式的。

混合模式最多見於 photoshop 中，是 PS 中十分強大的功能之一。固然，瞎用亂用混合模式誰都會，利用混合模式將多個圖層混合獲得一個新的效果，只是要用到恰到好處，或者說在 CSS 中利用混合模式製做出一些效果則須要對混合模式很深的理解及不斷的嘗試。

簡單區分一下這兩個屬性：

• mix-blend-mode 用於多個不一樣標籤間的混合模式
• background-blend-mode 用於單個標籤間內背景圖與漸變背景間的混合模式。

background-blend-mode 的可用取值與 mix-blend-mode同樣，不重複介紹，下面直接進入應用階段。

 

使用 background-blend-mode: lighten 實現任意圖片顏色賦色技術

OK，下面進入正文。如何經過純 CSS 技術實現任意圖片的任意顏色賦色技術呢？

假設咱們有這樣一張圖片，JPG、PNG、GIF 均可以，可是有一個前提要求，就是黑色純色，背景白色：

利用 background-blend-mode ，咱們能夠在圖片下疊加多一層其餘顏色，經過 background-blend-mode: lighten 這個混合模式實現改變圖片主體顏色黑色爲其它顏色的目的。

簡單的 CSS 代碼示意以下：

.pic {
    width: 200px;
    height: 200px;
    background-image: url($img);
    background-size: cover;
}

.pic1 {
    background-image: url($img), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}

效果以下：

注意，上面 CSS 這一句是關鍵 background-image: url($img), linear-gradient(#f00, #f00); ，這裏我疊加了一層漸變層 linear-gradient(#f00, #f00) ，實現了一個純紅色背景，而不是直接使用 #f00 實現紅色背景。

 

使用 background-blend-mode: lighten 實現主色改成漸變色

這個方法更厲害的地方在於，不僅僅能夠將純色圖片由一種顏色改成另外一種顏色，並且能夠將圖片內的黑色部分由單色，改成漸變顏色！

簡單的 CSS 代碼以下：

.pic {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}

能夠獲得這樣的效果：

OK，看到這裏，你們夥確定會有疑問了，這是怎麼實現的呢？

這裏就有必要解釋一下 lighten 這個混合模式了。變亮，變亮模式與變暗模式產生的效果相反：

1. 用黑色合成圖像時無做用，用白色時則仍爲白色
2. 黑色比任何顏色都要暗，因此黑色會被任何色替換掉。反之，若是素材的底色是黑色，主色是白色。那就應該用變暗（darken）的混合模式

CodePen Demo -- 純色圖片賦色技術嘗試

 

 

侷限性嘗試 -- 使用透明底色圖片

上述方法要求了圖片自己內容爲純色黑色，底色爲白色。那麼若是像 PNG 圖片同樣，只存在主色，而底色是透明的，是否可以一樣實現效果呢？

假設咱們有一張這樣的 PNG 圖片（灰色主色，透明底色）：

按照上面的方式實現一遍，結果以下：

任意顏色賦色技術嘗試 -- PNG圖片

很遺憾，當底色是透明的時候，會被混合模式混合上疊加層的顏色，沒法使用。全部，這個技術也就存在了一個使用前提：

• 圖片的底色爲白色，主色爲黑色

固然主色也能夠是其餘顏色，只是這個時候疊加須要考慮顏色的融合，沒有使用黑色直觀。

 

background-blend-mode 實現圖片任意顏色賦色技術總結

綜上，咱們確實只須要兩行代碼就能夠實現白色底色黑色主色圖片的任意顏色賦色技術。

{
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
}

其中，background-image 的第二值就是你但願賦值給的漸變色（固然，漸變色能夠生成純色）。

咱們同時給一個標籤設置了背景圖片和漸變色，而後利用了 background-blend-mode:lighten 這個關鍵屬性，達到了相似 PS 裏的混合模式效果。

看起來 background-blend-mode 名爲混合模式，但彷佛表現上更像是 PS 當中的一種的剪切蒙板，混合模式是修改圖片自己，蒙版跟遮罩都是在圖片上一層經過疊加其餘層對圖像進行調整。

那麼由此方法自己能夠想到，一些能對圖形進行色彩調整的 CSS 屬性是否也能達到一樣的功能呢？諸如：

• filter 濾鏡
• mask-image
• mask-clip

感興趣的讀者能夠自行嘗試，在接下來的文章我也會繼續進行探討。

黑色純色，背景白色可能侷限了這個技巧的使用場景，可是在不少白色底色的頁面中，這個方法仍是能夠很好的發揮做用，許多 ICON 圖片再也不須要兩個或者更多個顏色的版本！

 

background-blend-mode 兼容性

相較於 mix-blend-mode，background-blend-mode 的兼容性會更好一點。因此本文所介紹的技術在移動端是存在用武之地的：

 

最後

固然，background-blend-mode 自己還能夠實現其餘更多酷炫的效果，將在下一篇文章 難以想象的混合模式 mix-blend-mode（二） 分享給你們，敬請期待。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

好了，本文到此結束，但願對你有幫助 :)

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