按钮背景比应有的暗 3%答案

【问题标题】：Button background appears 3% darker than it should be按钮背景比应有的暗 3%
【发布时间】：2013-04-07 07:59:08
【问题描述】：

我正在将 CSS 添加到基于 Bootstrap 的 Web 应用程序中，以匹配来自设计师的 PDF。有一个按钮图像，其背景颜色 Seashore 报告为 rgb(0,186,158) aka 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 不会处理它。

EDIT2

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

【问题讨论】：

【解决方案1】：

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

PNG 图像没有色彩空间信息，而是有一个 gamma 值，并且在解释该值以确定色彩空间时存在问题。您可能会看到不同浏览器之间存在颜色差异，因此如果您调整一个浏览器显示 PNG 的颜色，它在其他浏览器中将无法匹配。

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

渲染文本是另一回事。浏览器渲染不同字体的方式总会有细微的差别，这取决于所使用的渲染方法、安装的字体以及系统/用户设置。您根本无法期望在不同的浏览器中得到完全相同的结果。

【讨论】：

非常感谢 - 我不知道 PNG 的行为不同。转换为 JPEG 确实完美匹配。
@SteveBennett 只需在 Photoshop 工具“Save for Web”中使用并选择 PNG-24
@monkeyinsight：我认为这是对问题的评论。无论如何，尽管 PNG-8 被限制为 256 种颜色，但每种颜色仍然可以是 24 位颜色范围内的任何颜色。 PNG-24 格式仍然存在相同的色彩空间问题，导致不同的浏览器呈现不同。