如何删除图像的透明部分

问题描述

我想将此图像添加到我的网站中，但是看起来像这样。

enter image description here

如您所见，这张图片是透明的，但是您可以在背景中看到灰色和白色的框。

如何删除背景框？

这是我的代码。

.first-cloud{
  width: 10%;
  height: 10%;
  position:relative;
  left: 60%;
}

  <img class="first-cloud" src="https://e7.pngegg.com/pngimages/508/582/png-clipart-cloud-computing-drawing-cartoon-cloud-white-cloud-love-white.png" alt="cloud">

解决方法

正如其他人已经指出的那样，您所使用的图像不是透明的。

这是您hotlinking所在网站的安全措施。如果您直接从网站上下载图片，则会获得透明版本。

要下载图像，请按照下列步骤操作：

1. 转到此链接：https://www.pngegg.com/en/png-bzgkn
2. 按下显示“免费下载PNG”的绿色按钮
3. 将其保存到您的计算机

,

要使图像具有透明背景，请下载免费程序Gimp2（Photoshop的替代软件），并按照网络上的其中一个教程创建透明背景。

请注意，.jpg文件不能具有透明背景-您必须将文件重新保存为.png或.webp文件格式。

摘自Thomas Cokelaer在2016年的博客文章：

创建透明背景：

1. 在Gimp2中打开图片。
2. 选择要透明的区域。 从“工具”窗口或“层”窗口上的“工具”“选择工具”菜单中使用适当的选择工具进行选择。我通常使用魔术棒/模糊选择（选择连续区域）工具或按颜色选择区域工具。 单击您要选择的区域。按住Shift键单击可添加更多区域/颜色。提示：如果放大（查看-缩放菜单），则可以更轻松地查看所选内容的详细信息。
3. 在“层”窗口（显示图像的窗口）中，选择“层” –“透明度” –“添加Alpha通道”。如果该层被空白，则说明已完成。这样可以确保您的图片可以存储透明度数据
4. 选择编辑-清除。这使选择变得透明。
5. 保存文件。注意：如果将其另存为PNG文件，请确保在“另存为PNG”对话框中选择“保存透明像素的颜色值”选项。

参考：

http://thomas-cokelaer.info/blog/2016/09/gimp-how-to-make-a-transparent-background/

https://www.guidingtech.com/image-background-transparent-gimp/