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

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

然而,当应用此图像时,图像是超暗的.看起来像正确的色调,但饱和度和亮度是错误的？

对我在哪里做错的任何想法？我看了一下这个例子:如何计算所需的色调旋转以生成特定的颜色？但似乎给了我同样的问题.

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 值的最后一个参数输入）。

这是您正在寻找的，还是您特别需要使用过滤器？