當我們在做項目的時候，
經常有許多個icon 圖片兩個或更多個顏色的版本，
下面切圖網教你，
怎麼用簡單的css改變圖片的顏色。
熟悉PS的人都應該知道混合模式， css3中也有兩個與混合模式相關的屬性， mix-blend-mode 和 background-blend-mode
首先我們來瞭解一下mix-blend-mode 取值情況
mix-blend-mode: normal; // 正常
mix-blend-mode: multiply; // 正片疊底
mix-blend-mode: screen; // 濾色
mix-blend-mode: overlay; // 疊加
mix-blend-mode: darken; // 變暗
mix-blend-mode: lighten; // 變亮
mix-blend-mode: color-dodge; // 顏色減淡
mix-blend-mode: color-burn; // 顏色加深
mix-blend-mode: hard-light; // 強光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 飽和度
mix-blend-mode: color; // 顏色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial; // 默認
mix-blend-mode: inherit; // 繼承
mix-blend-mode: unset; // 還原
這些大致和ps中一致， 除了最後三個。
background-blend-mode 這個是背景的混合模式。 這個可以是背景圖片間的混合， 也可以是背景圖片和背景顏色的混合。
現在我們使用 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 實現紅色背景。
現在解釋一下lighten這個混合模式。 變亮， 變亮模式與變暗模式產生的效果相反：
1、 用黑色合成圖像時無作用， 用白色時則仍為白色。
2、 黑色比任何顏色都要暗，
相容性
相較於 mix-blend-mode， background-blend-mode 的相容性會更好一點。 所以本文所介紹的技術在移動端是存在用武之地的：