image.png

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

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

假设你遇到这样的情况:

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

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

image.png

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

通常,你可能首先想到的是调整设计:

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

但其实不需要这样做……

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

什么是 mix-blend-mode

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

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

mix-blend-mode 如何起作用呢?

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

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

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

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

image.png

举个例子:

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

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

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

如何判断哪个颜色更暗?

很简单……

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

  • 色调 (Hue)
  • 饱和度 (Saturation)
  • 亮度 (Lightness)

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

image.png

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

浏览器支持

image.png

总结:

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

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

首发于公众号 大迁世界,欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问?我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


王大冶
68.1k 声望105k 粉丝