我的png图片在不同的背景下会改变颜色，这是怎么回事？

Question

我有这张图片。https:/imgur.comaA0fW1YZ。

但是，当我把这个图片嵌入到HTML中时，颜色却乱了。https:/jsbin.comrurisowewiedit?html,output...

<img src="https://i.imgur.com/iMxIrhV.png" alt="">

我怀疑是图片的元数据出了问题？谁能给我解释一下这里发生了什么？

我不知道这是否相关，但我用Python和Numpy生成了这张图片（通过像全景马赛克一样将两张图片拼接在一起），并将输出保存为png。不过我不认为这是根本原因，因为我用同样的输入运行了几次同样的代码，这种奇怪的变色问题只发生了一次。

不过之后我用IrfanView中的ResizeResample对话框调整了这个图片的大小。

有什么想法吗？

Answer 1

我不太了解HTML，也不知道它是如何处理透明度的，但我可以告诉你，你的图像中有很大一部分是在alpha（即透明度）通道中。

如果你单独提取alpha通道，你可以看到它包含了图像的大部分细节。我是这样做的 图像魔术 终端中。

magick YourImage.png -alpha extract alpha.png

另一方面，如果你去掉alpha通道，只显示RGB数据，你会发现几乎什么都没有。

magick YourImage.png -alpha off RGB.png

所以我的答案是，你们的浏览器无法或者不愿意 正确地识别阿尔法通道。

你也许可以做一个像这样的可用图像。

magick YourImage.png -background black -flatten Useable.jpg