如何在懸停時使元素背景顏色變暗而不影響透明度？

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

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

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

方法：疊加深色圖層

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

在CSS 中實現覆蓋層：

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

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

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

<div class="button"> some text </div>
<div class="button">

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

以上是如何在懸停時使元素背景顏色變暗而不影響透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！