很久之前在張鑫旭大大的博客看到過一篇 PNG格式小圖標(biāo)的CSS任意顏色賦色技術(shù)，當(dāng)時(shí)驚為天人，感慨還可以這樣玩，私底下也曾多次想過有沒有其他方法可以實(shí)現(xiàn)，又或者不僅僅局限于 PNG 圖片。
mix-blend-mode 與 background-blend-mode
mix-blend-mode 在我之前的一篇文章初略介紹過 — 不可思議的混合模式 mix-blend-mode，與本文的主角 background-blend-mode 一樣，都是實(shí)現(xiàn)混合模式的。南寧網(wǎng)站建設(shè)
混合模式最常見于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一。當(dāng)然，瞎用亂用混合模式誰都會(huì)，利用混合模式將多個(gè)圖層混合得到一個(gè)新的效果，只是要用到恰到好處，或者說在 CSS 中利用混合模式制作出一些效果則需要對混合模式很深的理解及不斷的嘗試。
簡單區(qū)分一下這兩個(gè)屬性：
mix-blend-mode 用于多個(gè)不同標(biāo)簽間的混合模式
background-blend-mode 用于單個(gè)標(biāo)簽間內(nèi)背景圖與漸變背景間的混合模式。
background-blend-mode 的可用取值與 mix-blend-mode一樣，不重復(fù)介紹，下面直接進(jìn)入應(yīng)用階段。
使用 background-blend-mode: lighten 實(shí)現(xiàn)任意圖片顏色賦色技術(shù)
OK，下面進(jìn)入正文。如何通過純 CSS 技術(shù)實(shí)現(xiàn)任意圖片的任意顏色賦色技術(shù)呢？
假設(shè)我們有這樣一張圖片，JPG、PNG、GIF 都可以，但是有一個(gè)前提要求，就是黑色純色，背景白色：
利用 background-blend-mode ，我們可以在圖片下疊加多一層其他顏色，通過 background-blend-mode: lighten 這個(gè)混合模式實(shí)現(xiàn)改變圖片主體顏色黑色為其它顏色的目的。
簡單的 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 這一句是關(guān)鍵 background-image: url($img), linear-gradient(#f00, #f00); ，這里我疊加了一層漸變層 linear-gradient(#f00, #f00) ，實(shí)現(xiàn)了一個(gè)純紅色背景，而不是直接使用 #f00 實(shí)現(xiàn)紅色背景。
使用 background-blend-mode: lighten 實(shí)現(xiàn)主色改為漸變色
這個(gè)方法更厲害的地方在于，不單單可以將純色圖片由一種顏色改為另一種顏色，而且可以將圖片內(nèi)的黑色部分由單色，改為漸變顏色！
簡單的 CSS 代碼如下：
.pic {
background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten;
background-size: cover;
}
可以得到這樣的效果：
OK，看到這里，大家伙肯定會(huì)有疑問了，這是怎么實(shí)現(xiàn)的呢？
這里就有必要解釋一下 lighten 這個(gè)混合模式了。變亮，變亮模式與變暗模式產(chǎn)生的效果相反：
用黑色合成圖像時(shí)無作用，用白色時(shí)則仍為白色
黑色比任何顏色都要暗，所以黑色會(huì)被任何色替換掉。反之，如果素材的底色是黑色，主色是白色。那就應(yīng)該用變暗（darken）的混合模式
CodePen Demo — 純色圖片賦色技術(shù)嘗試（https://codepen.io/Chokcoco/pen/rpLryX）
局限性嘗試 — 使用透明底色圖片
上述方法要求了圖片本身內(nèi)容為純色黑色，底色為白色。那么如果像 PNG 圖片一樣，只存在主色，而底色是透明的，是否能夠同樣實(shí)現(xiàn)效果呢？
假設(shè)我們有一張這樣的 PNG 圖片（灰色主色，透明底色）：
按照上面的方式實(shí)現(xiàn)一遍，結(jié)果如下：
任意顏色賦色技術(shù)嘗試 — PNG圖片（https://codepen.io/Chokcoco/pen/RxRBzy）
很遺憾，當(dāng)?shù)咨峭该鞯臅r(shí)候，會(huì)被混合模式混合上疊加層的顏色，無法使用。所有，這個(gè)技術(shù)也就存在了一個(gè)使用前提：
圖片的底色為白色，主色為黑色
當(dāng)然主色也可以是其他顏色，只是這個(gè)時(shí)候疊加需要考慮顏色的融合，沒有使用黑色直觀。
background-blend-mode 實(shí)現(xiàn)圖片任意顏色賦色技術(shù)總結(jié)
綜上，我們確實(shí)只需要兩行代碼就可以實(shí)現(xiàn)白色底色黑色主色圖片的任意顏色賦色技術(shù)。
{
background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten;
}
其中，background-image 的第二值就是你希望賦值給的漸變色（當(dāng)然，漸變色可以生成純色）。
我們同時(shí)給一個(gè)標(biāo)簽設(shè)置了背景圖片和漸變色，然后利用了 background-blend-mode:lighten 這個(gè)關(guān)鍵屬性，達(dá)到了類似 PS 里的混合模式效果。
看起來 background-blend-mode 名為混合模式，但似乎表現(xiàn)上更像是 PS 當(dāng)中的一種的剪切蒙板，混合模式是修改圖片本身，蒙版跟遮罩都是在圖片上一層通過疊加其他層對圖像進(jìn)行調(diào)整。
那么由此方法本身可以想到，一些能對圖形進(jìn)行色彩調(diào)整的 CSS 屬性是否也能達(dá)到同樣的功能呢？諸如：
filter 濾鏡
mask-image
mask-clip
感興趣的讀者可以自行嘗試，在接下來的文章我也會(huì)繼續(xù)進(jìn)行探討。
黑色純色，背景白色可能局限了這個(gè)技巧的使用場景，但是在很多白色底色的頁面中，這個(gè)方法還是可以很好的發(fā)揮作用，許多 ICON 圖片不再需要兩個(gè)或者更多個(gè)顏色的版本！
background-blend-mode 兼容性
相較于 mix-blend-mode，background-blend-mode 的兼容性會(huì)更好一點(diǎn)。所以本文所介紹的技術(shù)在移動(dòng)端是存在用武之地的：
