IE8中PNG的背景颜色

时间:2009-03-19 15:21:26

标签: internet-explorer internet-explorer-8 png

我有以下徽标,它与FF3,Chrome(#363636)中的HTML正文显示的背景颜色相同。

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

这个FF3 / Chrome是否原谅我的PNG,或者只是另一个IE bug(我认为他们在IE7中修复了PNG支持)?

更新:我仍然遇到此问题,我用来纠正它的pngcrush参数是:

  

pngcrush -replace_gamma 0.5181347 infile.png outfile.png

Win32二进制链接为here

7 个答案:

答案 0 :(得分:22)

您的PNG中有一个伽马校正信息(gAMA块)结构。如果您正在处理想要进行伽马校正的照片,那就没关系了,但这对网络来说不是正确的。

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

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

答案 1 :(得分:6)

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

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

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

答案 2 :(得分:2)

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

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

我在所有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%透明度 - 只是一种预感。

答案 5 :(得分:0)

答案 6 :(得分:0)

让其他人知道使用Yahoo Smushit来优化网络图像可以帮助我纠正这个问题(一般来说,通过这个或类似的方式运行图像是一个好主意)。< / p>