如何使用 CSS 去除图片背景
介绍
你是否曾经想过让网站上的图片背景消失？好消息！只需一行 CSS 代码，即可轻松实现此效果，无需任何花哨的软件或复杂的工具。在本篇面向初学者的指南中，我们将逐步讲解如何使用 CSS 去除图片背景。
了解 CSS 属性
神奇之处在于 CSS 的 mix-blend-mode 属性。该属性允许你指定元素的内容如何与其父元素或其后方元素的内容混合。通过设置 mix-blend-mode: multiply;，我们可以移除图像的背景并使其透明。
设置您的 HTML 文档
这是我的 html 代码，如您所见，我的图片有白色背景，而我的 html 主体有其他背景颜色，我需要去除这个白色背景，并使其透明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: #fbd290;
}
img {
width: 100px;
}
</style>
</head>
<body>
<img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>
现在，如果我想去除图片的背景，只需添加一行代码即可mix-blend-mode: multiply;。
您也可以将其添加到您的图片添加中，看看是否有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
background: #fbd290;
}
img {
width: 100px;
mix-blend-mode: multiply;
}
</style>
</head>
<body>
<img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>
就这么简单！只需一行简单的 CSS 代码，就能轻松去除网页上图片的背景。快来试试，见证奇迹吧！祝您编程愉快！
如果您喜欢这篇博客，请分享给其他可能觉得有用的人。您也可以关注我，获取更多关于 JavaScript、React、Next.js 和 Web 开发的内容。
你可以在Twitter、LinkedIn和GitHub上找到我。
感谢阅读🌻
文章来源：https://dev.to/madhusaini22/how-to-remove-background-of-image-with-css-1e6e