使用CSS 使元素背景顏色變暗

增強用戶界面涉及透過改變交互元素（例如按鈕）的外觀來突出顯示它們。一種常見的方法是在懸停時使背景顏色變暗。

最初，人們可能會嘗試調整不透明度，但這會影響顏色和透明度。存在更有針對性的解決方案。

方法：疊加深色圖層

使用背景影像建立深色疊加層。此方法保留了原始文字顏色，同時使背景變暗。

在CSS中實作覆蓋層：

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

此技術會自動變暗任何背景顏色，甚至是多種顏色，如範例所示：

 some text 
透過利用這種疊加方法，開發人員可以輕鬆地在懸停時使元素背景顏色變暗，從而增強用戶交互性，而無需手動計算較暗的色調。