CSS3 HSL - 飽和度值（僅）

Question

我有一個名爲「button」的類，我只是將它用於所有懸停元素。我的大部分按鈕都是黑色（背景色），而.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）更改底層的按鈕顏色。但請記住，按鈕的文本值也會受到影響，從而給您帶來可用性方面的問題。