如何通過純 CSS 技術實現任意圖片的任意顏色賦色技術呢？
使用 background-blend-mode: lighten 實現任意圖片顏色賦色技術
假設我們有這樣一張圖片，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）的混合模式
<!-- 使用前提： 圖片的底色爲白色，主色爲黑色 -->
html
<div class="pic">原圖</div>
<div class="pic pic1">紅色</div>
<div class="pic pic2">灰色</div>
<div class="pic pic3">漸變色</div>css
$img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png';
.pic {
width: 200px;
height: 200px;
margin: 50px;
text-align: center;
font-size: 42px;
line-height: 420px;
float: left;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}
.pic2 {
background-image: url($img), linear-gradient(#333, #333);
background-blend-mode: lighten;
background-size: cover;
}
.pic3 {
background-image: url($img), linear-gradient(#f00, #00f);
background-blend-mode: lighten;
background-size: cover;
}侷限性嘗試 -- 使用透明底色圖片
上述方法要求了圖片本身內容爲純色黑色，底色爲白色。那麼如果像 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 的兼容性會更好一點。所以本文所介紹的技術在移動端是存在用武之地的：
