Css 为什么'；过滤器：反转（1）色调旋转（180度）和#x27；把红色变成桃红色？

在CSS中，当您应用

过滤器：反转（1）色调旋转（180度）

对于图像，红色变成桃红色

为什么会这样？如何使用CSS反转图像并使红色看起来像红色

例如：

使用

过滤器的同一图像：反转（1）色调旋转（180度）

应用：

---

更新：

在最初的回答中，建议将上述过滤器应用于

html

元素，然后将其应用于图像。这些颜色看起来还是不好看。结果如下：

---

当您使用色调旋转时，您正在围绕色轮旋转。如果要进行色调旋转（180度），则围绕色轮旋转180度。反转过滤器用于简单地反转颜色。要将图像更改为正确的颜色，请执行以下操作：

第一个添加-过滤器：反转（1）色调旋转（180度）到html

---

然后为图像添加相同的内容。这将有助于理解为什么我们需要进行一些数学运算

如果我们从

invert（1）

（最简单的一个）开始，我们将使用

f（x）=（255-x）

。所以

rgb（255,0,0）

将变成

rgb（0255255）

对于

色调旋转（180度）

更复杂。考虑到这一点，我们将得到以下矩阵：

-0.574  1.43  0.144
 0.426  0.43  0.144
 0.426  1.43 -0.856

所以我们会

R' =  -0.574*R  1.43*G  0.144*B = 1.43*255 + 0.144*255 = 401.37
G' =   0.426*R  0.43*G  0.144*B = 0.43*255 + 0.144*255 = 146.37
B' =   0.426*R  1.43*G -0.856*B = 1.43*255 - 0.856*255 = 146.37

然后是最终颜色

rgb（255146.37146.37）

，它不是红色的

html{
背景：rgb（255146.37146.37）
}

谢谢。我试了一下，但它仍然显示为桃红色。你能给我一个代码片段吗？当然。到底为了什么？一个

img

元素？这样我就可以测试你的代码，看看你需要修复什么谢谢你的尝试！哇，泰曼尼，这真是一个惊人的答案。非常感谢。我给瑞德写了一个问题，让事情变得简单。老实说，我没想到会有这么不可思议的回答。我更大的目标是在保持颜色色调的同时交换黑白（以及任何接近这些极端的东西）。有没有办法做到这一点？@RockPaperLz MaskitorCasket好吧，我会说是的，但你需要大量使用过滤函数，并掌握数学知识，才能找到与你的案例完美结合的方法。