Image Gecko（Firefox）和Trident（IE）与Webkit（Chrome和Safari）中错误颜色的图像渲染疯狂

我设计了一个网站，使左侧的图像无缝地融入右侧的背景色，而不具有透明度（该颜色仅在图像的最右侧边界与背景相匹配）。按照图像的方式，制作具有透明度的剪切效果非常困难，因此此解决方案往往效果良好（请参见示例了解原因）

根据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）中，颜色在图像或背景中呈现不正确，看起来只是业余爱好者

为了说明这个独特的问题，您可以在这里看到实时测试示例：

---

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

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

---

我猜您正在使用文件>另存为保存位图，如果您使用文件>为Web和设备保存位图，您将得到预期的结果。

另一条评论：我知道Chrome和Firefox中红色与绿色、红色与蓝色的对比，我不确定这是否相关。这里的例子：这是有效的。不幸的是，没有其他浏览器能做到这一点。我使用Save for Web and Devices选项保存了JPEG，将背景更改为

#dbe1e6

（没有颜色管理的sRBG版本），它可以正常工作。叹息。。。我同意，总有一天Mozilla会赶上潮流的。这就是说，我曾经在Chrome中看到过反复应用配置文件的问题，颜色会变得越来越饱和。祝网站好运。浏览器不一致是许多开发者/设计师的祸根。谢谢你，谢谢你的快速回复！事实上，默认情况下，Mozilla会根据图像上的颜色配置文件进行颜色校正，而WebKit则不会。@BorisZbarsky True，我已经对此进行了研究，它比我所说的更复杂。编辑了答案。请看测试——对我来说，Chrome和Firefox都以不同的方式失败。