CSS hue-从红色旋转到特定颜色

Question

我有一个扁平的红色 .png 图像，我想通过使用 CSS 过滤器将其更改为特定颜色。我认为这是最好的方法。

我正在使用 SASS，通过使用它我可以获得颜色的色调、饱和度和亮度。通过使用“红色”图像，这意味着色调的旋转度数从 0 开始，因此通过使用 hue-rotate 然后我将它从 0 旋转到特定的色调度数颜色。与饱和度和亮度相同。

filter: hue-rotate(hue(#50e3c2)) saturate(saturation(#50e3c2)) brightness(lightness(#50e3c2));

这输出为:

filter: hue-rotate(166.53061deg) saturate(72.41379%) brightness(60.19608%); 如果我检查特定颜色的 HSL 是什么...

Hex: #50E3C2
HSL: 167° 72% 60%
RGB: 80 227 194

然而，当应用此图像时，图像非常暗。看起来色调正确，但饱和度和亮度不对？

对我做错的地方有什么想法吗？我看过这个例子:How to calculate required hue-rotate to generate specific colour?但似乎给了我同样的问题。

https://jsfiddle.net/gosj0ur2/

Answer 1

如果目标只是将图像的颜色从红色更改为其他特定颜色，您可以使用 CSS 伪选择器来创建一种叠加层，这样您就无需摆弄滤镜。可能是这样的:

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

<div class='boo'></div>   

https://codepen.io/thebabydino/pen/AtzpB

在您的情况下，您不会有猫的图片...并且叠加层不会是半透明的，它会是完全不透明的(只需更改 RGBA 值的最后一个参数输入)。

这就是您要找的东西，还是您特别需要使用过滤器？