按鈕背景比應該顯示的顏色深3％

Question

我將CSS添加到基於Bootstrap的Web應用程序中，以匹配來自設計人員的PDF。有一個按鈕圖像，其背景色Seashore報告爲rgb(0,186,158)又名hsl(171,100,36%)。所以我設置了按鈕的背景顏色以匹配圖像：

background-image: url('images/elements/small-search-button-up.png'); 
background-color: hsl(171,100%,36%); 

只有......它沒有。

從亮度減去3％修正它：

我很想知道這是爲什麼。在所有其他應用的CSS樣式中，我看不到任何明顯的原因。這發生在OS X Snow Leopard上的Chrome和Firefox中。

我看到與某些字體類似的東西（比較網頁呈現的輸出與提供的PDF），但是原因可能不同。

編輯

這是原始圖像。希望SO不會處理它。

EDIT2

爲什麼使用PNG？這就是設計師提供圖像的方式。我並沒有意識到與色彩空間信息有關。另外，我會認爲PNG對於需要平坦背景和清晰邊緣的字形（與JPEG相比）更好，不是嗎？

Answer 1

這很可能是不一致顯示的PNG圖像的顏色。

PNG圖像沒有色彩空間信息，而是具有伽瑪值，並且存在解釋該值以確定色彩空間的問題。您可能會發現不同瀏覽器之間存在顏色差異，因此如果您調整某個瀏覽器顯示PNG的顏色，則在其他瀏覽器中不匹配。

如果您需要顏色匹配其他元素，或者使PNG的背景變爲透明而不是綠色，請使用其他文件格式。

---

渲染文本是另一回事。根據所使用的渲染方法，安裝的字體以及系統/用戶設置，瀏覽器呈現不同字體的方式總是存在細微差異。你不能期望在不同的瀏覽器中有完全相同的結果。