CSS:浏览器显示的颜色代码与CSS样式表上设置的颜色代码不同



我有一个属性为的div

background-color: #327EB2;

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

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

事实上,我不认为这是显示器、分辨率或浏览器版本的问题,因为问题是所显示颜色的代码实际上是完全不同的!

此外,Photoshop警告我#327EB2不是"网络安全颜色",但我不认为这是问题所在,因为我经常在床单中使用非网络安全颜色,我从未遇到过这样的问题。

**Fiddle: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上看到这个问题。

您的问题与CSS无关,问题在图像中!

这是因为您提供的示例在额外的背景(通过CSS"着色"的那个)显示了正确的#327EB2,这足以知道CSS部分是可以的。

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

如果你不能对颜色进行管理/恢复到所需的颜色,另一个解决方案则相反,更改CSS颜色以匹配图像的最后一行。

据我所见,一切正常。你底部的图像有代码为"#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中获取颜色时,可能会发生类似的情况。

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

最新更新