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

时间：2016-03-05 21:39:35

标签： css

我使用png图片作为单页网站的背景。我希望png的背景与页面背景相匹配，因为我向下滚动以使其看起来是连续的。我已将background-color值设置为#EC966A。在我的Mac上，它在Firefox和Chrome中正确显示，但在Safari上没有显示。

Firefox和Chrome的转变：

Firefox and Chrome

Safari中的过渡：

Safari

我有人在Windows上测试它，它在Chrome和Firefox上也显示错误。

以下是代码：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我认为问题在于图像颜色分析，这可能会导致不同浏览器的渲染不同。

您可以在此处详细了解：https://css-tricks.com/color-rendering-difference-firefox-vs-safari/

修改

您的img有一个 RGB 个人资料。所以我把它转换为 sRGB ，这是推荐的网络颜色配置文件。

输出：

＆＃13;
＆＃13; 
.bg{
  background:#DE9964;
  width:332px;
  height:91px;
}
＆＃13; 
<img src="http://i68.tinypic.com/29bld6r.png">
<div class="bg"></div>
＆＃13;
＆＃13;
＆＃13;

现在它在Chrome和Safari上应该看起来都一样。

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

相关问题
最新问题