html - 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);

演示| 来源

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

Answer 2

这个问题有两种解决方案：

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

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

您还可以使用 rgba(r,g,b,a) 更改底层按钮颜色。但请记住，按钮的文本值也会受到影响，给您带来可用性问题。