html - CSS3 HSL - 饱和值(仅)

Question

我有一个名为“按钮”的类，我只是将它用于所有悬停元素。我的大多数按钮都是黑色(背景颜色)，.button:hover 将元素的背景颜色值更改为灰色。

但是，我的某些按钮具有随机颜色，因此当它们的背景颜色变为浅灰色时，它们会失去效果。出于这个原因，我想更改悬停元素的“饱和度”值而不是修改整个颜色。这样，悬停效果将基于基色..

我在想...是否可以(仅)更改背景颜色的“饱和度”值，以便我的悬停效果对于随机颜色仍然有用。

Answer 1

使用 filter目前似乎只适用于基于 webkit 的浏览器..

-webkit-filter: saturate(3);
filter: saturate(3);

Demo | Source

将饱和度滤镜与亮度耦合似乎效果最好，黑色明显受到影响

-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);

Demo | Source

附加演示:http://html5-demos.appspot.com/static/css/filters/index.html