我在Chrome中尝试使用mix-blend-mode: multiply，但结果不如预期：当我将magenta、cyan和yellow相加时，结果并不是黑色，而是棕色。在Safari中，一切正常。
我尝试了添加以下代码的技巧：
html, body {
background-color: white;
}
但这并没有改变什么。还有其他解决方案吗？
谢谢！
混合模式：在Chrome中无法使用乘法混合模式。
3
- Léalbatroz
2个回答
1
当我在具有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
- clickbait
1
Chrome对于mix-blend-mode和body有一个比较普遍的问题，即它不会将body作为背景考虑在内，因此您应该尝试使用一个带有白色背景的中间div来实现此效果。
- Guy Nachshon
2
1不幸的是，这并没有改变任何事情。 - Léalbatroz
1你能分享一段代码片段或者示例吗？ - Guy Nachshon
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接