我在Chrome中尝试使用mix-blend-mode: multiply
,但结果不如预期:当我将magenta
、cyan
和yellow
相加时,结果并不是黑色,而是棕色。在Safari中,一切正常。
我尝试了添加以下代码的技巧:
html, body {
background-color: white;
}
但这并没有改变什么。还有其他解决方案吗?
谢谢!
我在Chrome中尝试使用mix-blend-mode: multiply
,但结果不如预期:当我将magenta
、cyan
和yellow
相加时,结果并不是黑色,而是棕色。在Safari中,一切正常。
我尝试了添加以下代码的技巧:
html, body {
background-color: white;
}
但这并没有改变什么。还有其他解决方案吗?
谢谢!
当我在具有DCI-P3色域的电脑上使用mix-blend-mode
时,在Google Chrome中遇到了同样的问题。
发生这种情况的原因与色彩空间有关。某些浏览器中的混合模式计算是在显示器的色彩空间中完成的,该空间可能不是sRGB,但CSS颜色声明是在sRGB中进行的(除非另有规定)。
像#ff0000
这样的最大饱和度的CSS颜色在较大的色彩空间(如DCI-P3)中并不是最大饱和度的。 colorjs.io的转换器显示,在sRGB中最红的红色rgb(srgb 255 0 0)
相当于在P3中部分饱和的红色rgb(p3 235.052, 61.663, 46.740)
。
在P3屏幕上,乘以品红、青色和黄色会产生这些颜色的部分饱和度的结果,而不会产生黑色。
本文解释了这种情况是如何发生的。
文章中的图片:
阅读更多:https://danielcwilson.com/blog/2020/03/blend-modes-in-spaaaace
Chrome对于mix-blend-mode和body有一个比较普遍的问题,即它不会将body作为背景考虑在内,因此您应该尝试使用一个带有白色背景的中间div来实现此效果。