html - 如何使相同的颜色在不同的浏览器中看起来相同？

Question

我选择了一种我想在整个网站中使用的颜色 - 它是 Logo 和页眉的颜色，以及其他颜色。在我的例子中，它是 #7ed321。我创建了 Logo 并将其导出为 PNG 并去除了颜色配置文件。

问题是，该页面在 Firefox、Safari 和 Chrome 中看起来完全不同 - 每个都以自己的方式呈现颜色。

Chrome、Safari 和 Firefox，从上到下。这是 Logo 和下面的标题。它们在您的屏幕上可能看起来一样，但在我的屏幕上肯定不同。

• Chrome - 将页眉和 Logo 呈现为原生 #7ed321 (sRGB #94C9D6)。
• Safari - 将页眉和 Logo 呈现为原生 #54df16 (sRGB #7ed321)，一种更亮的绿色。
• Firefox - 将 Logo 呈现为原生 #54df16 (sRGB #7ED321) 并将 header 呈现为原生 #7ed321 (sRGB #94C9D6)。所以颜色甚至都不匹配。

基本上，Chrome 意识到如果我在我的 PNG 和我的 CSS 中请求 #7ed321，我总是希望在我的屏幕上看到 #7ed321，所以它会必要的转换为 sRGB 以匹配我的显示器的颜色配置文件。

Safari 假定我在 sRGB 中提供了两个值，因此它不会转换为我的目标显示器。

Firefox 不会转换我的 Logo ，但会将我的 CSS 提供的 #7ed321 转换为 sRGB #94c9d6。

因此，同一页面在不同浏览器中看起来不一致。差别不大，但如果可以的话，我想让他们看得更近一些。我可以对我的 CSS/PNG 做些什么来使页面看起来一样吗？

Answer 1

有一种方法可以确保 Logo 和代码中出现的任何其他品牌颜色相同。那就是使用 CSS 为绿色的任何实例着色。

将 Logo 导出为具有透明背景的白叶。然后您可以使用 CSS 来形成 Logo 以创建圆圈并填充背景颜色。例如:

HTML

<div class="logo"></div>

CSS

.logo {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px; 
  background: #7ed321 url(../img/logo.png) center no-repeat;
}

现在代码已经应用了绿色，因此它将与您应用 CSS 的任何其他绿色相匹配，例如标题。

至于让所有浏览器和屏幕看起来都一样 - 这是一场失败的战斗。用户都使用不同的屏幕，呈现的颜色也会不同。老实说，花任何时间尝试做任何事情都是毫无意义的。

使用 CSS 构建 Logo 的替代方法是将 Logo 显示为字体。您可以使用像 Fontastic 这样的工具来做到这一点，如果您愿意，它可以让您在 Logo 上调整大小和冷却 CSS 过渡:http://fontastic.me/