CSS3 HSL - 饱和度值(仅限)

Question

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

但是,我的一些按钮具有随机颜色,因此当背景颜色变为浅灰色时会失去效果.出于这个原因,我想改变悬停项目的"饱和度"值,而不是修改整个颜色.这样,悬停效果将基于基色.

我在想...如果可以改变背景颜色的"饱和度"值(仅),那么我的悬停效果对随机颜色仍然有用.

Answer 1

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

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

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

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