分享圖片 rip user 場景 ges icon gif enter 假設

如何通過純 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 原圖 紅色 灰色 漸變色 ``` ``` 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 的兼容性會更好一點。所以本文所介紹的技術在移動端是存在用武之地的：  最後 自己是一個五年的前端工程師  點擊：[加入](http://u6.gg/ek2NA)

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