如何使用 CSS 輕鬆變暗元素背景？

使用CSS 使元素變暗：一個方便的技巧

目前使用CSS 使元素背景變暗的方法可能很乏味，需要手動建立顏色較深的十六進位代碼。本文提供了一種方便的替代方案，利用背景影像來優雅地實現所需的變暗效果。

問題：繁瑣的手動變暗

將滑鼠懸停在按鈕上時，它通常會將背景顏色變暗以增強用戶互動性。以前，這是透過在CSS 中指定較暗的十六進位代碼來實現的，如下所示：

.Button:hover {
  background-color: #ALittleDarkerHex;
}

但是，找到合適的較暗的十六進位代碼可能非常耗時且不精確。

解決方案：背景圖像疊加

此技術不是修改背景顏色屬性，而是使用背景圖像和線性漸變在元素頂部引入深色層：

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

這種深色疊加層應用於現有的背景顏色上，在不改變文字顏色的情況下創建微妙的變暗效果。 40% 的不透明度允許底層背景顏色保持可見，同時降低其強度。

實作與範例

要示範此技術，請考慮以下HTML 和CSS：

<div class="button"> some text </div>
<div class="button">
<pre class="brush:php;toolbar:false">.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);
}

按鈕將顯示其原始背景顏色，當滑鼠懸停在其上時，無論背景顏色如何，都會應用微妙的變暗效果。