gpt4 book ai didi

css - 为什么 'filter: invert(1) hue-rotate(180deg)' 将红色变成桃红色?

转载 作者:行者123 更新时间:2023-12-04 01:09:23 31 4
gpt4 key购买 nike

在 CSS 中,当你申请

filter: invert(1) hue-rotate(180deg)


对于图像,红色变为桃红色。
为什么会这样,如何使用 CSS 反转图像并仍然使红色看起来像红色?
例子:
RGB image normal
filter: invert(1) hue-rotate(180deg) 相同的图像应用:
RGB image inverted and with hue rotated 180 degrees

更新:
最初的答案中建议将上述过滤器应用于 html元素,然后也将其应用于图像。颜色仍然看起来很差。结果如下:
RGB image with filter applied to both HTML element and image

最佳答案

了解为什么我们需要进行一些数学运算。
如果我们从 invert(1) 开始(最简单的)我们将使用 f(x) = (255 - x) ref .所以rgb(255,0,0)会变成rgb(0,255,255)对于 hue-rotate(180deg)它更复杂。考虑 the specification我们将得到以下矩阵:

-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(255,146.37,146.37)这不是红色的

html {
background: rgb(255, 146.37, 146.37)
}


what can be done to use CSS to invert an image and still have red look like red?


这取决于考虑其他颜色你想得到什么结果,但你可以添加 staturate()过滤器以恢复您的红色:

img {
filter: invert(1) hue-rotate(180deg) saturate(10);
}
<img src="/image/jikdT.png">

再次进行一些数学运算以了解正在发生的事情。根据相同的规范,经过一些简化,我们将得到以下矩阵:
 7.87  -7.15 -0.72
-2.13 2.85 -0.72
-2.13 -7.15 9.28
所以
 R' =  7.87*R  -7.15*G -0.72*B =  7.87*255 - 7.87*146.37 = bigger than 255
G' = -2.13*R 2.85*G -0.72*B = -2.13*255 + 2.13*146.37 = negative
B' = -2.13*R -7.15*G 9.28*B = -2.13*255 + 2.13*146.37 = negative
最终颜色 rgb(255,0,0)

关于css - 为什么 'filter: invert(1) hue-rotate(180deg)' 将红色变成桃红色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65344006/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com