如何解决如何删除图像的透明部分
我想将此图像添加到我的网站中,但是看起来像这样。
如您所见,这张图片是透明的,但是您可以在背景中看到灰色和白色的框。
如何删除背景框?
这是我的代码。
.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所在网站的安全措施。如果您直接从网站上下载图片,则会获得透明版本。
要下载图像,请按照下列步骤操作:
- 转到此链接:https://www.pngegg.com/en/png-bzgkn
- 按下显示“免费下载PNG”的绿色按钮
- 将其保存到您的计算机
要使图像具有透明背景,请下载免费程序Gimp2(Photoshop的替代软件),并按照网络上的其中一个教程创建透明背景。
请注意,.jpg文件不能具有透明背景-您必须将文件重新保存为.png或.webp文件格式。
摘自Thomas Cokelaer在2016年的博客文章:
创建透明背景:
- 在Gimp2中打开图片。
- 选择要透明的区域。 从“工具”窗口或“层”窗口上的“工具”“选择工具”菜单中使用适当的选择工具进行选择。我通常使用魔术棒/模糊选择(选择连续区域)工具或按颜色选择区域工具。 单击您要选择的区域。按住Shift键单击可添加更多区域/颜色。提示:如果放大(查看-缩放菜单),则可以更轻松地查看所选内容的详细信息。
- 在“层”窗口(显示图像的窗口)中,选择“层” –“透明度” –“添加Alpha通道”。如果该层被空白,则说明已完成。这样可以确保您的图片可以存储透明度数据
- 选择编辑-清除。这使选择变得透明。
- 保存文件。注意:如果将其另存为PNG文件,请确保在“另存为PNG”对话框中选择“保存透明像素的颜色值”选项。
参考:
http://thomas-cokelaer.info/blog/2016/09/gimp-how-to-make-a-transparent-background/
https://www.guidingtech.com/image-background-transparent-gimp/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。