IE8中PNG的背景颜色

Posted 2021-04-14

我有以下徽标，其显示与FF3，Chrome（＃363636）中的html正文相同的背景颜色。

但在IE8中它会显示不同的深色。

这个FF3 / Chrome是原谅我的PNG，还是只是另一个IE bug（我认为他们修复了IE7中的PNG支持）？

更新：我仍然遇到这个问题，我用来纠正它的pngcrush参数是：

pngcrush -replace_gamma 0.5181347 infile.png outfile.png

Win32二进制链接是here。

答案

您的PNG中有一个伽马校正信息（gAMA块）结构。如果您正在处理想要进行伽马校正的照片，那就没问题了，但这对于网络来说并不是正确的。

在网络上，浏览器通常不会对HTML / CSS颜色或其他图像应用伽马校正，因此如果您使用伽玛校正，您将在PNG上获得与页面其余部分不一致的结果。有些浏览器不会因为这个原因而应用PNG gamma，这就是获得变量结果的原因。

将徽标加载到图像编辑器中，并在没有gAMA块信息的情况下将其保存回来。 More。

另一答案

这里评价最高的答案表明使用pngcrush将伽玛值奇怪地重置为0.5181347。这可能适用于某些宇宙，但在我们的最佳路径中，您可以从PNG中去除所有颜色空间信息，使其完全呈现在浏览器用于CSS中颜色的相同中性RGB三元组空间中：

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

对于真正的彩色头来说，这意味着您设计的原始颜色在另一台显示器或操作系统上可能看起来不一样，但根据浏览器+，每个用户都会以相同的方式呈现具有相同RGB值的所有颜色+他们正在上演。具体而言，邻接PNG的背景颜色或相邻颜色将匹配，因此您可以使用互锁图像和颜色设计您的网站。

另一答案

我用屏幕截图讨论了PNG Color Problem in Internet Explorer及其解决方案。解决方案是从PNG图像中删除伽玛块（例如，使用TweakPNG实用程序）。这使得图像在Internet Explorer中以正确的阴影呈现。一些不常见的浏览器可能仍然表现不正常。

另一答案

您需要从PNG中删除gAMA和sRGB块。此外，您需要删除附加到图像的任何ICC颜色/颜色配置文件。

Photoshop“保存到Web”添加了标准的sRGB ICC配置文件 - 这对于内容图像很有用，但对于需要与CSS颜色匹配的图像样式完全错误。

这在Safari中尤为明显 - 我有一个blog post。

另一答案

我在所有IE浏览器中都注意到了这个问题--6,7,8。一些PNG图像在透明区域周围会有黑色轮廓。原来我必须打开Gimp（我的免费跨平台图像编辑器），打开有问题的PNG，并使用150％的模糊选择工具重新选择透明区域，然后单击删除。然后重新保存。这通常解决了透明区域PNG周围的斑点大约98％。

如果这不起作用，则在Gimp中重新加载，将背景设置为白色，选择展平图像，将模糊选择阈值设置为3％，选择要删除的背景，选择删除（清除），然后再次重新选择背景阈值为150％，删除，然后重新保存图像。

注意我的模糊选择工具我的Gimp设置是检查抗锯齿，取消选中羽化边缘，选中选择透明区域，取消选中合并样本，然后选择复合。

是的，这似乎是具有透明背景的PNG图像的IE错误。其他浏览器 - Opera，Safari，Firefox，Chrome - 都没有这个问题。我怀疑是一些图像程序设置为50％透明度作为边缘上某种抗锯齿的一部分，因为它只是边缘有问题。我认为非IE浏览器在像素上处理50％的透明度，但IE可能只能理解像素的100％透明度 - 只是预感。

另一答案

这是唯一对我有用的解决方案：http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8

另一答案

对于其他人来说，知道使用Yahoo Smushit来优化网络图像可能对我有用，这对我来说是纠正了这个问题（一般来说，通过这个或类似的东西运行你的图像是一个好主意）。