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