如何用CSS去除图像的背景

迷南。 2024-05-07 22:15 75阅读 0赞

***介绍***  
您是否曾经想过让图像的背景在您的网站上消失？嗯，你很幸运！只需一行CSS代码，您就可以实现这种效果，而不需要任何花哨的软件或复杂的工具。在这个适合初学者的指南中，我们将逐步介绍使用 CSS 删除图像背景的步骤。

***了解 CSS 属性***  
神奇之处在于 mix-blend-mode CSS 属性。此属性允许您指定元素的内容应如何与其父元素或其后面的元素的内容混合。通过设置 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>

![在这里插入图片描述][e207304e267b4de29b6be73e13b3bcf6.png]

现在，如果我想删除图像的背景，我只需添加一行代码即可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>

![在这里插入图片描述][44cdb7574ae5436094d9cc5c7ecb4440.png]

就是这样！只需一行简单的 CSS，您就可以轻松删除网页上图像的背景。尝试一下，看看奇迹发生！

[e207304e267b4de29b6be73e13b3bcf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/78babd9f73ef48bab9ecb795ac74cada.png
[44cdb7574ae5436094d9cc5c7ecb4440.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/b143b4f4f9b8427d8309eba1c025a665.png