使用 CSS 自訂按鈕樣式時，通常希望在懸停時更改背景顏色以進行強調。手動指定較暗的色調可能很乏味。這是一個更有效的解決方案：
利用背景圖像進行分層
不要直接調整背景顏色屬性，而是使用以下命令在按鈕頂部創建一個微妙的圖層背景圖像。此技術在巧妙地修改背景的同時保持文字可見性。
程式碼範例：
.button {
display: inline-block;
color: #fff;
padding: 10px 20px;
font-size: 20px;
background-color: red;
}
.button:hover {
background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}在此範例中，將不透明度為 40% 的線性漸層套用於懸停的元素。自訂漸層顏色和不透明度以實現所需的變暗效果。
此方法提供了靈活性，讓您可以使任何背景顏色變暗而無需指定特定的十六進位值。此外，它還確保文字顏色保持不變，提供一致的使用者體驗。
以上是如何用 CSS 更有效地實現微妙的背景變暗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
