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>

來源

2016-03-05 Dionysis

沒有對我們自己進行測試，很難評論。尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.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

來源

2016-03-05 21:44:35 fbid

比你的答案。我閱讀了文章和討論，但似乎沒有提供解決方案。它描述了不同圖像之間的問題，但我的問題是在圖像和「css」背景之間。我會發布一些代碼。 – Dionysis

CSS背景顏色和瀏覽器之間的PNG顏色不一致

回答

相關問題