时间戳

首页 > 解决方案 > mix-blend-mode：乘法渲染不正确？

css - mix-blend-mode：乘法渲染不正确？

问题描述

我正在制作一个徽标，它使用红色和蓝色形状的多重混合模式在颜色相乘的空间中创建一个非常特定的灰色。

在我尝试的所有图形编辑软件中，结果都是一样的： 在此处输入图像描述

R 255 G 38 B 30

X

R 30 G 200 B 255

=

R 30 G 30 B 30

但是我使用 css 得到的结果非常不同。使用下面的代码，这两种相同的颜色最终会乘以这种奇怪的红移颜色R 87 G 49 B 47

.red, .blue {
mix-blend-mode: multiply;
}
.red {
background: rgb(255,38,30);
}
.blue {
background: rgb(30,200,255);
}

为什么浏览器对这些颜色的解释不同，即使它应该是 RGB 值的直接乘法？

你可以在这个 codepen看到一个工作示例。

标签： csscolorsrenderingblending

解决方案

推荐阅读