混合混合模式：乘法在 Chrome 中不起作用答案

【问题标题】：Mix-blend-mode: multiply not working in Chrome混合混合模式：乘法在 Chrome 中不起作用
【发布时间】：2022-01-04 14:05:03
【问题描述】：

我正在尝试在 Chrome 上使用 mix-blend-mode: multiply，但它没有按预期工作：当我将 magenta、cyan 和 yellow 添加在一起时，它不会给我黑色，而是给我brown。在 Safari 中，一切正常。

我尝试了添加以下代码的技巧：

html, body {
    background-color: white;
}

但它不会改变任何东西。有没有其他解决办法？

谢谢！

【问题讨论】：

标签： css google-chrome mix-blend-mode

【解决方案1】：

Chrome 在 mix-blend-mode 和 body 方面存在一个众所周知的问题，问题是它不会将 body 作为背景，因此您应该尝试使用带有白色背景的中间 div 来实现此效果。

【讨论】：

不幸的是它并没有改变任何东西
你能分享一个 sn-p/fiddle 吗？

【解决方案2】：

我在具有 DCI-P3 色域的计算机上的 Google Chrome 中使用 mix-blend-mode 时遇到了同样的问题。

它发生的原因与色彩空间有关。某些浏览器中的混合模式计算是在显示器的颜色空间中完成的，可能不是 sRGB，但 CSS 颜色声明在 sRGB (unless specified otherwise).

诸如#ff0000 之类的最大饱和 CSS 颜色在 DCI-P3 之类的更大色彩空间中不是最大饱和的。 colorjs.io’s converter 表明 sRGB 中最红的红色 rgb(srgb 255 0 0) 相当于 P3 中部分饱和的红色 rgb(p3 235.052, 61.663, 46.740)。

在 P3 屏幕上，品红色、青色和黄色相乘会产生这些颜色相乘的结果，这些颜色部分饱和，不会变成黑色。

This article 解释了它是如何工作的。

文章中的图片：

【讨论】：