使用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中文網其他相關文章！
