通過一個 CSS 屬性，你就能去除任何圖像的背景。

這一屬性在大多數(shù)現(xiàn)代瀏覽器中都得到了支持。

假設(shè)你遇到這樣的情況：

你已經(jīng)完成了一個很棒的布局，完全響應(yīng)式，效果也如預(yù)期。

但有幾張圖像的背景與網(wǎng)站的背景不匹配，就像下面這張圖：

圖片

圖像的背景顏色與預(yù)期的背景色完全不同。

通常，你可能首先想到的是調(diào)整設(shè)計：

更改背景色，使其與圖像的背景色匹配。

但其實不需要這樣做……

在 CSS 中，有一個叫做 mix-blend-mode 的屬性，就是在這里發(fā)生了“魔法”。

什么是 mix-blend-mode？

HTML 不是編程語言，它沒有嚴(yán)格的語法和邏輯規(guī)則。

你的網(wǎng)站中，圖像通常被包含在各自的 div 元素中，每個 div 元素都有自己的背景色，而每個圖像也有自己的背景。

那 mix-blend-mode 如何起作用呢？

當(dāng)你對圖像元素應(yīng)用 mix-blend-mode 屬性時，瀏覽器會開始對比圖像和 div 元素的顏色。

例如，如果你設(shè)置樣式為 mix-blend-mode: darken，瀏覽器會逐像素地進行顏色對比。

這意味著，在每個位置，瀏覽器會比較圖像和 div 元素的兩個像素。

如果設(shè)置了 darken，那么較暗的像素會被保留。

圖片

舉個例子：

假設(shè) div 的背景比圖像的背景更暗，那么 div 背景的顏色會被保留，圖像的背景顏色則會被“去除”。

如果圖像背景的亮度比 div 更高，那么圖像的背景就會“消失”，而與 div 的背景混合。

這時，看起來圖像的背景好像被去除了，但實際上它只是與 div 的背景融合了。

如何判斷哪個顏色更暗？

很簡單……

你可以將這兩種顏色轉(zhuǎn)換為 HSL 顏色模型，它包含三個參數(shù)：

• 色調(diào) (Hue)
• 飽和度 (Saturation)
• 亮度 (Lightness)

其中，亮度值越高，顏色就越亮。所以，在進行比較時，亮度值較低的顏色會被保留。

圖片

通常情況下，產(chǎn)品的顏色會比背景顏色更強烈，也更暗。因此，產(chǎn)品的實際圖像保持原樣，而圖像背景會與 div 背景融合，看起來就像圖像的背景已經(jīng)被去掉了。

瀏覽器支持

圖片

總結(jié)：

通過使用 mix-blend-mode 屬性，尤其是 darken 模式，你可以輕松去除圖像的背景，并讓它和網(wǎng)頁背景無縫融合。這不僅省去了繁瑣的設(shè)計修改，還能在不改變圖像的前提下，完美匹配網(wǎng)站的設(shè)計風(fēng)格。

這樣一來，你就能用一行 CSS 去實現(xiàn)圖像背景的去除，效果又簡單又直觀。