CSS背景颜色和浏览器之间的PNG颜色不一致

问题描述：

我使用png图像作为单页网站的背景。当我向下滚动时，我想让png的背景与页面的背景相匹配，以便它看起来连续。我已将background-color的值设置为#EC966A。在我的Mac上，它在Firefox和Chrome中正确显示，但在Safari上不显示。CSS背景颜色和浏览器之间的PNG颜色不一致

在Firefox和Chrome的转变：

在Safari的转变：

我有某人测试它在Windows上，它显示了错误的Chrome和Firefox浏览器好。

下面是代码：

<!DOCTYPE html> 
 
<HTML> 
 
    <BODY> 
 
    <P>This is the image:</P> 
 
    <img src="http://i.stack.imgur.com/bpYQq.png" alt=""> 
 
    <p>and this is the background</p> 
 
    <div class="bg" style="background-color: #EC966A; width: 335px; height: 100px;"></div> 
 
    </BODY> 
 
</HTML>

没有对我们自己进行测试，很难评论。寻求代码帮助的问题必须包含在问题本身**中重现它所需的最短代码**。请参阅[**如何创建最小，完整和可验证的示例**]（http://*.com/help/mcve） –

@Paulie_D谢谢！我已经添加了一些代码。 – Dionysis

答

我认为这个问题是关于图像的颜色配置可导致不同的浏览器不同的渲染。

你可以阅读更多关于它在这里：https://css-tricks.com/color-rendering-difference-firefox-vs-safari/

编辑：

你的IMG拥有RGB轮廓。所以我将它转换为sRGB这是Web推荐的颜色配置文件。

OUTPUT：

.bg{ 
 
    background:#DE9964; 
 
    width:332px; 
 
    height:91px; 
 
}

<img src="http://i68.tinypic.com/29bld6r.png"> 
 
<div class="bg"></div>

现在应该看起来都在Chrome和Safari相同。

在Mac OS X上测试 - Chrome浏览器48.0和Safari 9.0.3

比你的答案。我阅读了文章和讨论，但似乎没有提供解决方案。它描述了不同图像之间的问题，但我的问题是在图像和“css”背景之间。我会发布一些代码。 – Dionysis

CSS背景颜色和浏览器之间的PNG颜色不一致

相关推荐