css - 谷歌浏览器更改图形颜色

Question

谷歌浏览器似乎总是在改变我试图匹配背景颜色的图像颜色。我尝试将它保存在 Photoshop 和 GIMP 中，甚至调整了每个中的颜色设置，但它在 Chrome 中没有帮助。FF 和 IE 工作正常（一次）。

我的图像的颜色是#282828。将其保存为 PNG 后，我在 GIMP 和 Photoshop 中重新打开它，并使用吸管工具确认颜色仍为 #282828。当它在 Chrome 中呈现时，它会变暗。我有一个背景颜色为#282828 的 div，图片就在它旁边。我截图了，div的背景颜色是#282828，图片的背景颜色是#1d1d1d。我尝试了几种不同的颜色，每种颜色都有相同的结果。我什至尝试将源图像设置为 Chrome 渲染它的颜色，但 Chrome 仍然会更改它。例如，由于 Chrome 将 #282828 更改为 #1d1d1d，我制作了源图像 #1d1d1d，当我在 Chrome 中渲染它时，它不是 #1d1d1d，而是其他一些更深的颜色。

在这一点上，我正在寻找修复或编程解决方法。因为图像是透明的，有曲线和阴影，我真的没有办法避免用 html 替换它，甚至它的一部分。

更新：我也尝试将其保存为 jpg 和 gif。gif 实际上可以工作，但不能保留投影。我正在使用的图像已附上。如果我在 Chrome 中截屏，GIMP 的吸管工具会显示它是#1d1d1d。如果我打开原件并做同样的事情，它是#282828。

Answer 1

PNG 使用伽马校正来尝试确保图像在所有显示器上看起来都一样，这可能会导致颜色不匹配，就像您看到的那样。这是图像编辑器问题和浏览器问题的结合：图像编辑器不会被迫在图像中嵌入伽马数据，如果伽马校正存在，浏览器可以自由地忽略它，并且当它不存在时可以随意强制执行一些。在这种情况下，我宁愿认为 Firefox 会忽略它。

如果您不希望其背景干扰页面背景，请使用透明 PNG。

[编辑] 对于您的具体情况，您可以通过样式元素复制您正在寻找的图形，使用border-radiusand box-shadow，这两个广泛实现的 CSS3 属性在旧浏览器上合理衰减。