css - 按钮背景比应有的颜色暗 3%

Question

我正在将 CSS 添加到基于 Bootstrap 的网络应用程序，以匹配来自设计师的 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 中都会发生这种情况。

我看到某些字体有类似的东西(将 Web 呈现的输出与提供的 PDF 进行比较)，但原因可能不同。

编辑

这是原始图像。希望 SO 不会处理它。

编辑2

为什么使用 PNG？这就是设计师提供图像的方式。我不知道色彩空间信息存在权衡。另外，我认为 PNG 更适合需要平坦背景和清晰边缘的字形(与 JPEG 相比)，不是吗？

Answer 1

很可能是 PNG 图像的颜色显示不一致。

PNG 图像没有颜色空间信息，而是有一个 Gamma 值，解释该值以确定颜色空间存在问题。您可能会发现不同浏览器之间存在颜色差异，因此如果您针对一种浏览器显示 PNG 的方式调整颜色，它在其他浏览器中将不匹配。

如果您需要颜色与其他元素匹配，请使用不同的文件格式，或者使 PNG 的背景透明而不是绿色。

---

渲染文本是另一回事。浏览器呈现不同字体的方式始终存在细微差异，具体取决于使用的呈现方法、安装的字体以及系统/用户设置。您根本无法期望在不同的浏览器中获得完全相同的结果。