css - 使用 css 的负饱和度

Question

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

所以我使用这些 css 属性来生成以下 HSL (-64, -67, 0)：

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

但是，存在一个问题，因为如果饱和度小于 0%，浏览器似乎会将其裁剪为 0%。

如何使用 css 进行负饱和度？

score 2 · Accepted Answer

有效值仅从 0% 到 100%

CSS 中的 HSL 也是如此

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

（您也可以使用 CSS calc，但这种情况更适合预处理器，甚至手动计算 - 请务必评论！）

1 回答 1