4

我有一个带有属性的 div：

background-color: #327EB2;

当我在浏览器上打开页面时，我注意到显示了不同的颜色。如果我捕获屏幕并在 Photoshop 中打开捕获的图像，我可以看到捕获的颜色代码实际上是#437BB6。我的 CSS 样式表中没有设置该颜色。

我在不同的显示器、不同的颜色分辨率、不同的浏览器和版本上进行了测试，从 FF 4+ 到 IE8+、Opera、Chrome、Safari 等...

其实我不认为是显示器、分辨率或浏览器版本的问题，因为问题是显示颜色的代码实际上是完全不同的代码！

此外，Photoshop 警告我 #327EB2 不是“网络安全颜色”，但我认为这不是问题，因为我经常在工作表中使用非网络安全颜色，而且我从未遇到过这样的问题。

** 小提琴：http: //jsfiddle.net/286tE/

*更新

问题是 div 有一个背景图像和一个背景颜色。背景颜色必须匹配背景图像的最后一个像素的颜色（像往常一样），即#327EB2。无论如何，我可以看到从图像的最后一个像素到背景颜色的不同颜色：

http://test.testblueday.eu/test/cbsissue.png

您可以在这里查看页面，问题显示在左侧“Top Marchi”列表之后：

http://test.testblueday.eu/test/cbstest.html

我留下了纯 CSS 和 JS（未压缩）让您查看所有属性。

** 更新 2

我使用 Mac，但我们也可以在 Windows 上看到问题。

4

2 回答 2

4

您的问题与CSS无关，问题出在图像中！

这是因为您提供的示例在额外的背景中显示了正确的#327EB2（通过 CSS “着色”的那个），这足以知道 CSS 部分是可以的。

注意在通过 Photoshop 导出的文件中进行的颜色校正/管理。

如果您无法对颜色进行管理/恢复为所需的颜色，另一种解决方案是相反，更改 CSS 颜色以匹配图像的最后一行。

于 2012-12-12T16:33:28.647 回答
3

据我所知，一切正常。您在底部的图像具有代码“#1080b3”的颜色 - 我刚刚下载了该图片 ( gradient_box_emboss.jpg) 并在 GIMP 中使用颜色选择器获取了颜色。当我像这样修改css时：

.embosser {
   background: #1080B3 url('/images/gradient_box_emboss.jpg') right top no-repeat;
   color: white;
   padding: 5px 6px;
}

缺少差异。当我打印您的网站并将其粘贴到 GIMP 中时，颜色选择器显示“错误”背景的颜色为#327eb2. 当我打开您的图片时，您的问题中的背景颜色为 #307db7. 它在 jpg 中，我想在将原始数据压缩为 .jpg 时丢失了一些颜色信息。当您尝试在 Photoshop 中获取颜色时，可能会发生类似的情况。

当您将图像从一种格式转换为另一种格式时，可能会出现问题。上面是最简单的修复 - 将背景颜色更改为图像上的颜色。

于 2012-12-12T16:40:14.977 回答