使用css的负饱和度

Question

我正在剪辑Photoshop网页布局。我有以下过滤器我想在css中应用（我不想使用已应用过滤器的图像）。

所以我使用这些css属性生成以下HSL（-64，-67,0）：

-webkit-filter: hue-rotate(-64deg);
-webkit-filter: saturate(-67%);

但是，有一个问题，因为如果饱和度小于0％，浏览器似乎将其剪辑为0％。

如何使用css进行负饱和？

Answer 1

有效值仅为0％至100％

https://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()

CSS中的HSL也是如此

http://www.w3.org/TR/css3-color/#hsl-color

您只需要找出PhotoShop使用的比例并进行相应调整。 如果你正在使用像SASS或LESS这样的预处理器，你可以在那里进行。 因此，如果PhotoShop从-100％变为100％，您可以(100% + $val)/2

（您也可以使用CSS calc，但这种情况对于预处理器或甚至手动计算更好 - 只需确保评论！）