仅使用 CSS 从图像中删除背景

布满荆棘的人生 2024-03-22 19:18 44阅读 0赞

在这篇对初学者友好的博文中，我们将学习如何仅使用 CSS，特别是 mix-blend-mode 属性从图像中删除背景。此技术可用于创建有趣的视觉效果并通过减少对编辑图像的需求来提高网站的性能。

为什么这个技巧很重要？  
下载 .png 文件时，您可能希望它具有透明背景。然而，这并非总是如此。有时，.png 文件可能具有纯色背景，例如白色或黑色。

在这种情况下，您可以使用 mix-blend-mode 属性删除纯色背景并创建透明背景的外观。

什么是混合混合模式？  
mix-blend-mode 是一个 CSS 属性，用于定义元素的内容应如何与元素的父元素及其背景的内容混合。有了这个，您可以根据元素的直接背景为元素的部分内容创建漂亮的混合和颜色查看这篇文章

要从图像中删除背景，我们将使用 mix-blend-mode 属性和 multiply 值。此值将删除图像的较白部分。这是一个例子：

div 内的图像：  
![在这里插入图片描述][6e1ae3040aa042b39612e8dceb43e6b0.png]  
div 中的图像与 mix-blend-multiply：  
![在这里插入图片描述][ae9d019387584dfaafa36918190e117e.png]  
同样out可以用TailwindCSS写这个  
![在这里插入图片描述][9971b7bf7d7942259fa2139159a69eb8.png]  
在本教程中，我们学习了如何仅使用 CSS 和 mix-blend-mode 属性从图像中删除背景。与使用编辑过的图像相比，此技术可提供更大的设计灵活性、改进的性能和更好的 SEO 优势。有了这些知识，您就可以在您的网站上创建有趣的视觉效果并改善整体用户体验。

[6e1ae3040aa042b39612e8dceb43e6b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/5a02a8cd3718468e97bea3a405e6a019.png
[ae9d019387584dfaafa36918190e117e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2ccfb00505114656866a1efd158a2fc5.png
[9971b7bf7d7942259fa2139159a69eb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e25bcc433bc346a7a58b79061da2c067.png