使用一行 CSS 去除图像背景

通过一个 CSS 属性，你就能去除任何图像的背景。

这一属性在大多数现代浏览器中都得到了支持。

假设你遇到这样的情况：

你已经完成了一个很棒的布局，完全响应式，效果也如预期。

但有几张图像的背景与网站的背景不匹配，就像下面这张图：

图像的背景颜色与预期的背景色完全不同。

通常，你可能首先想到的是调整设计：

更改背景色，使其与图像的背景色匹配。

但其实不需要这样做……

在 CSS 中，有一个叫做 mix-blend-mode 的属性，就是在这里发生了“魔法”。

什么是 mix-blend-mode？

HTML 不是编程语言，它没有严格的语法和逻辑规则。

你的网站中，图像通常被包含在各自的 div 元素中，每个 div 元素都有自己的背景色，而每个图像也有自己的背景。

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

当你对图像元素应用 mix-blend-mode 属性时，浏览器会开始对比图像和 div 元素的颜色。

例如，如果你设置样式为 mix-blend-mode: darken，浏览器会逐像素地进行颜色对比。

这意味着，在每个位置，浏览器会比较图像和 div 元素的两个像素。

如果设置了 darken，那么较暗的像素会被保留。

举个例子：

假设 div 的背景比图像的背景更暗，那么 div 背景的颜色会被保留，图像的背景颜色则会被“去除”。

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

这时，看起来图像的背景好像被去除了，但实际上它只是与 div 的背景融合了。

如何判断哪个颜色更暗？

很简单……

你可以将这两种颜色转换为 HSL 颜色模型，它包含三个参数：

• 色调 (Hue)

• 饱和度 (Saturation)

• 亮度 (Lightness)

其中，亮度值越高，颜色就越亮。所以，在进行比较时，亮度值较低的颜色会被保留。

通常情况下，产品的颜色会比背景颜色更强烈，也更暗。因此，产品的实际图像保持原样，而图像背景会与 div 背景融合，看起来就像图像的背景已经被去掉了。

浏览器支持

总结：

通过使用 mix-blend-mode 属性，尤其是 darken 模式，你可以轻松去除图像的背景，并让它和网页背景无缝融合。这不仅省去了繁琐的设计修改，还能在不改变图像的前提下，完美匹配网站的设计风格。

这样一来，你就能用一行 CSS 去实现图像背景的去除，效果又简单又直观。

最后：

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读