html中的png img有问题

Question

我在html/CSS上的第一天和我在stackoverflow上的第一篇文章。我对我想包含在我的 html 中的 png img 有这个初学者问题。我尝试过：

.html：

<div class="transparent">
<img style="background: transparent;" src="img./skypepng.png"
</div>

.css：

.transparent{
background: transparent;
}

但我想不通。请帮忙。

提前谢谢。证据：

方格背景

Answer 1

您的 png 必须具有透明背景才能显示 alpha 图层

Answer 2

从互联网上下载透明的Skype图像(确保没有版权(。链接静态文件夹中的图像，并添加如下所示的链接...

src="{{url_for('static', filename='skype.png')}}"

其中文件名是文件的名称。

Answer 3

一些PNG图像只是看起来是透明的，而实际上它们具有方格背景，就像背景一样。尝试在图像查看器中打开 png。检查它是否是真正透明的图像，或者它是否显示方格背景。

此外，您插入的图像如下所示：

<img src="../images/image.png" alt="Image">

Answer 4

我会确保图像实际上是透明的，而不仅仅是原始透明图像的屏幕截图，因为名称skypepng.png使它看起来像这样。对于 CSS，我会尝试

.transparent{
background: url("skypepng.png") transparent
} 

此外，如果您没有为背景提供任何颜色，那么默认情况下，它在大多数浏览器上都是白色的。 希望这有帮助！