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

Answer 2

此问题有两种解决方案：

首先，使用透明的png，白色到透明渐变。在onHover上，将图像应用于按钮。我没试过，但看起来很有希望。

其次，使用css插入阴影。正确设置参数后，您可以轻松管理渐变效果。

您还可以使用rgba（r，g，b，a）更改基础按钮颜色。但请记住，按钮的文本值也会受到影响，从而为您提供可用性问题。