Gecko (Firefox) 和 Trident (IE) 与 Webkit（Chrome 和 Safari）中颜色不正确的图像渲染疯狂答案

【问题标题】：Image-rendering madness with incorrect colors in Gecko (Firefox) and Trident (IE) vs. Webkit (Chrome and Safari)Gecko (Firefox) 和 Trident (IE) 与 Webkit（Chrome 和 Safari）中颜色不正确的图像渲染疯狂
【发布时间】：2012-07-31 20:24:48
【问题描述】：

我设计了一个网站，使左侧的图像无缝融入右侧的背景颜色，没有透明度（颜色只是在图像的最右边框与背景匹配）。图像的方式是，制作具有透明度的切口非常困难，因此该解决方案往往效果很好（请参阅示例以了解原因）。

图片的最右边是根据Photoshop CS5的十六进制颜色#d0d9e0，我已经适当地编写了CSS

body {
    background-color:#d0d9e0;
    background-image:url('image.jpg');
    background-size:auto 100%;
    background-repeat:no-repeat;
}

在 Webkit 浏览器（Chrome、Safari）中，图像与背景完美融合，效果极佳。在 Gecko 浏览器 (Firefox) 和 Trident 浏览器 (IE) 中，图像或背景中的颜色渲染不正确，看起来很业余。

为了说明这个独特的问题，您可以在此处查看实时测试示例：http://ezrahub.com/missmaryland/

尝试在不同的浏览器中查找，以发现我的挫败感来自哪里。除了使用图像透明度之外，还有什么方法可以解决这个问题（你可以在这里看到它为什么令人沮丧）？我知道 Gecko 与 Webkit 渲染图像的方式不同，但我想不出直接颜色不准确的借口。啊啊啊啊啊

【问题讨论】：

另一条评论：我知道 Chrome 与 Firefox 中的 Red vs. Green 和 Red vs. Blue 的事情，我不确定这是否相关。此处示例：i.imgur.com/pHszy.jpg

标签： image firefox google-chrome rendering gecko

【解决方案1】：

不同之处在于不同的浏览器如何处理颜色管理的内容。您文件中包含的 Photoshop ICC 配置文件在不同浏览器中的解释不同（或被忽略）。

我的猜测是您使用“文件”>“另存为”来保存位图，如果您使用“文件”>“为 Web 和设备保存”，您将获得预期的结果。

【讨论】：

这行得通。不幸的是，没有其他浏览器可以做到这一点。我使用 Save for Web and Devices 选项保存了 JPEG，将背景更改为 #dbe1e6（没有颜色管理的 sRBG 版本）并且它可以工作。唉……有一天 Mozilla 会跟上速度的。
我同意。也就是说，我曾经在 Chrome 中看到重复应用配置文件的问题，并且颜色会变得越来越饱和。祝你网站好运。
浏览器不一致是许多开发人员/设计师的祸根。感谢您的快速回复！
实际上，Mozilla 默认情况下会根据图像的颜色配置文件进行颜色校正，而 WebKit 不会，上次我检查了。
@BorisZbarsky 确实，我已经对此进行了研究，它比我说的要复杂。编辑了答案。请参阅gearoracle.com/tools/web-browser-color-management-test 进行测试——Chrome 和 Firefox 对我来说都以不同的方式失败。