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

Question

我正在将 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 不会处理它。

编辑2

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

score 1 · Accepted Answer

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

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

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

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

1 回答 1