1. 程式人生 > >兩行 CSS 代碼實現圖片任意顏色賦色技術

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

分享圖片 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 圖片(灰色主色,透明底色): ![image](http://upload-images.jianshu.io/upload_images/13133049-0e593397cc32b305.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 按照上面的方式實現一遍,結果如下: ![image](http://upload-images.jianshu.io/upload_images/13133049-4f705a92dc83f8a5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 很遺憾,當底色是透明的時候,會被混合模式混合上疊加層的顏色,無法使用。所有,這個技術也就存在了一個使用前提: 圖片的底色為白色,主色為黑色 當然主色也可以是其他顏色,只是這個時候疊加需要考慮顏色的融合,沒有使用黑色直觀。 **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 的兼容性會更好一點。所以本文所介紹的技術在移動端是存在用武之地的: ![image](http://upload-images.jianshu.io/upload_images/13133049-ef4ab2f4b6fb171f?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 最後 自己是一個五年的前端工程師 ![](https://s1.51cto.com/images/blog/201901/17/2bd7323f745841751a2898fdffbceb62.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 點擊:[加入](http://u6.gg/ek2NA)

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