CSS 过滤器 hue-rotate() 创建错误的颜色

Question

我正在尝试使用 CSS hue-rotate 过滤器更改红色图像的颜色。顺便说一下，我正在使用 Next.js。

这是我要更改颜色的图像：

所以我将 filter: hue-rotate(180deg) 应用于此图像，这是输出

如您所知，这显然是错误的。我尝试使用 Paint.net 旋转此图像的色调，这就是我应该收到的：

也许我应该使用一些 ReactJS 图像处理库？没有把握。 谢谢你的帮助。

Answer 1

原因可能是它是透明图像。使用一些亮度和对比度可以解决您的需求。尝试这个：

filter: hue-rotate(180deg) brightness(2.2) contrast(1);