如何在html网站中添加透明图片logo；我试过了，但是网站上出现白色背景，如何解决？

问题描述

我是菜鸟刚练向我的网站添加透明徽标但白色背景出现在标志后面如何解决？这是图片的链接 - https://www.pikpng.com/pngl/m/13-130171_avengers-png-logo-free-transparent-png-logos-rh.png

     This is the html & css code

body {
  background-color: blue;
}

.image {
  position: absolute;
  height: 100px;
  width: 200px;
}

<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">

<img class=image src="https://www.pikpng.com/pngl/m/13-130171_avengers-png-logo-free-transparent-png-logos-rh.png">

解决方法

这不起作用，因为图像实际上不是透明的 - 背景看起来好像是透明的，但实际上背景是看起来透明的设计。

PNG 图像通常具有透明背景，有时它不起作用（我不知道为什么）。已经发生在我身上了。发生这种情况时，我使用 photoshop 并选择需要的内容并再次转换为 png。有效。我知道这不是您想要的答案，但这是我为找到解决方案所做的。祝你好运！

在网站上，您需要使用 PNG 格式有以下 4 个重要原因：

支持所有浏览器
为较小的文件大小提供出色的压缩。
1600 万种颜色
256 个透明度级别 (0-255)

要创建新图像或编辑现有图像以使其具有透明度，您必须使用 Paint 程序，例如易于使用且免费的 Paint.Net https://www.getpaint.net 。在此程序中，您可以使用透明度效果或不透明度滑块或调色板来选择透明度。

重要提示：在“另存为”对话框中，选择 32 位 PNG 文件。这意味着您有 8 位红色、8 位绿色、8 位蓝色和 8 位透明度。

256 x 256 x 256 = 1600 万种颜色。
256 个透明度梯度。

background html transparent