更改CSS中页面的颜色配置文件
我正在开发一款2019年后期的Macbook Pro，它支持P3颜色色域(宽颜色)。
我正在建设一个网站，其中包括大量生动的颜色块，在那里，我只是希望颜色尽可能明亮。
大多数预定受众还将拥有P3功能的监视器.
我发现我的网站在火狐上看起来很棒--比在Safari中要好得多。结果是火狐不做任何颜色管理，所以应用了完整的P3色域。
Safari在sRGB空间中转换(或保留)我的颜色，使它们变暗。火狐，不使用任何颜色管理，使用完整的P3色域。
要查看这种差异的示例，请运行下面的代码片段(仅适用于宽颜色计算机上的Safari )：
<html><head><style>
#box1 {
background-color: color(display-p3 0 1 0);
height:50px;
}
#box2 {
background-color: rgb(0, 255, 0);
height:50px;
}
</style></head><body>
<div id="box1">P3 Color</div>
<div id="box2">sRGB Color</div>
您将看到，当在空间中定义颜色时，绿色要生动得多。
或者，您可以在Chrome和Firefox.并排打开这段代码，您可以很容易地看到，在火狐中绿色要丰富得多。
我要找的是一种告诉Safari的方法：不要将颜色限制在sRGB上，使用P3.的全部亮度。
我想重写我的css，但只需要做一次。类似于在顶部添加的内容：
@media color-gamut: p3{
@color-profile{ name: p3; src: url(/files/P3.icc); }
}我是在一个自动化的环境中工作，任何我必须手动指定每个图像的颜色空间的解决方案都是不可能的。
我可以修改的是基本文档模板，包括基本CSS，这对于所有页面都是一样的。
任何解决办法都是受欢迎的。这是一个令人遗憾的是，我有这台伟大的电脑与惊人的显示器，它是故意使我所有的颜色更褪色，超出必要。
回答 1
Stack Overflow用户
发布于 2020-05-19 21:56:52
我对此进行了测试，并有了完全不同的体验。
在Safari，Chrome，Firefox中运行你的代码片段-从左到右：
在这个屏幕截图(链接)中，它可能是不可见的，因为它是不正常的低采样，但是Safari中的P3框要生动得多。Chrome似乎一点都不支持P3，FF似乎不支持P3，但使sRGB变得和safari的P3一样明亮。啊呀。
@色彩-配置文件已经被提出了，但是掉落，所以您不能使用它。然而，可以所做的是在您的CSS顶部执行一些@supports查询：
/* sRGB color. */
:root {
--bright-green: rgb(0, 255, 0);
}
/* Display-P3 color, when supported. */
@supports (color: color(display-p3 0 1 0)) {
:root {
--bright-green: color(display-p3 0 1 0);
}
}
#box1 {
background-color: var(--bright-green);
height:50px;
}
#box2 {
background-color: rgb(0, 255, 0);
height:50px;
}在备份之后，Safari和FF都正确地呈现，但Chrome仍然恢复到sRGB。
截图链接是这里。
总之，您可以(而且应该)尽可能指定P3，但也可以添加回退。
最后，我不明白你的意思
任何我必须手动指定每个图像的颜色空间的解决方案都是不可能的。
那么，我们是在谈论图像还是可定义(bg)颜色？
https://stackoverflow.com/questions/61851331
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号