html – CSS3 HSL – 饱和度值(仅限)

概述我有一个名为“按钮”的类,我只是将它用于所有悬停元素.我的大多数按钮都是黑色(背景颜色),而.button：hover将项目的背景颜色值更改为灰色. 但是,我的一些按钮具有随机颜色,因此当背景颜色变为浅灰色时会失去效果.出于这个原因,我想改变悬停项目的“饱和度”值,而不是修改整个颜色.这样,悬停效果将基于基色. 我在想……如果可以改变背景颜色的“饱和度”值(仅),那么我的悬停效果对随机颜色仍然有用 我有一个名为“按钮”的类,我只是将它用于所有悬停元素.我的大多数按钮都是黑色(背景颜色),而.button：hover将项目的背景颜色值更改为灰色.

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

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

解决方法 目前使用 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

总结

以上是内存溢出为你收集整理的html – CSS3 HSL – 饱和度值(仅限)全部内容，希望文章能够帮你解决html – CSS3 HSL – 饱和度值(仅限)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。