CSS 中 Invert() 使用的颜色转换公式是什么？ [复制]答案

【问题标题】：what is the color transformation formula used by Invert() in CSS? [duplicate]CSS 中 Invert() 使用的颜色转换公式是什么？ [复制]
【发布时间】：2019-04-29 08:13:16
【问题描述】：

我在 CSS 中遇到了 invert() 函数，它可以反转图像颜色空间中的颜色。它以百分比形式输入一个值，例如invert(60%)，或数字（包括 0 到 1），例如invert(.6)，并根据输入反转图像颜色。

然后我发现了这个网站，其中有几个使用 invert() 函数的示例

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

当输入为 1 或 100% 时，我了解 invert 函数的工作原理，但我无法理解 invert(50%) 的工作原理，因为它将图像完全变成灰色。

我假设公式类似于：

abs(255 - value of each pixel's individual channel value)

把255改成128不能把图像完全变灰吗？

所以我找不到用于计算反转值的公式。

【问题讨论】：

还可以查看已接受答案的评论以获取一些官方链接

标签： css image image-processing css-filters

【解决方案1】：

invert(amount)的公式是

amount*(255-value)+(1-amount)*value

所以让你得到 1

255-value

为 0 你得到

value

0.5 你得到

.5*(255-value)+(1-.5)*value
127.5-.5*value+.5*value
127.5

这将是灰色的，因为值在公式中被完全消除了

【讨论】：

谢谢，这个公式很完美。顺便说一句，你能解释一下为什么当数量为 0.5 时每个像素值都会变成灰色（不使用公式）。
使用公式更容易。该量给出湿/干比率。所以 0 表示干燥，这是原始信号。 1 表示完全湿信号，它通过函数从基于信号的信号中返回全部值。 .5 表示两个信号的一半。如果你将两个信号相加，你最终会得到 255，因为当原始信号很亮时，反相会变暗，反之亦然。所以每种颜色都是白色的。但你只取两者的一半。因此，您可以有效地取掉灰色的一半。

【解决方案2】：

不管实际函数如何，如果它将(r, g, b)的任何值转换为(128, 128, 128)，那么it completely turns the image into grey。

255,  50, 100 => 128, 128, 128
200, 255, 200 => 128, 128, 128
...

【讨论】：