當(dāng)我們在做項目的時候，經(jīng)常有許多個icon 圖片兩個或更多個顏色的版本，下面切圖網(wǎng)教你，怎么用簡單的css改變圖片的顏色。
熟悉PS的人都應(yīng)該知道混合模式，css3中也有兩個與混合模式相關(guān)的屬性，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; // 強(qiáng)光
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; // 默認(rèn)
mix-blend-mode: inherit; // 繼承
mix-blend-mode: unset; // 還原
這些大致和ps中一致，除了最后三個。
background-blend-mode 這個是背景的混合模式。這個可以是背景圖片間的混合，也可以是背景圖片和背景顏色的混合。
現(xiàn)在我們使用 background-blend-mode: lighten 實現(xiàn)任意圖片顏色賦色技術(shù)吧。
假設(shè)我們有這樣一張圖片，JPG、PNG、GIF 都可以，但是有一個前提要求，就是黑色純色，背景白色：
利用background-blend-mode，我們可以在圖片下疊加多一層其他顏色，通過background-blend-mode: lighten這個混合模式實現(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)，實現(xiàn)了一個純紅色背景，而不是直接使用 #f00
實現(xiàn)紅色背景。
現(xiàn)在解釋一下lighten這個混合模式。變亮，變亮模式與變暗模式產(chǎn)生的效果相反：
1、 用黑色合成圖像時無作用，用白色時則仍為白色。
2、 黑色比任何顏色都要暗，所以黑色會被任何色替換掉。反之，如果素材的底色是黑色，主色是白色。那就應(yīng)該用變暗（darken）的混合模式。
兼容性
相較于 mix-blend-mode，background-blend-mode 的兼容性會更好一點。所以本文所介紹的技術(shù)在移動端是存在用武之地的：
