如何在不查找新的十六進位代碼的情況下使懸停時元素的背景變暗？

使用CSS 增強元素背景顏色：一種更簡單的方法

當試圖在懸停時使元素的背景顏色稍微變暗時，開發人員通常會煞費苦心地尋找較暗的十六進位代碼與原來的顏色對齊。然而，CSS 利用半透明疊加層的能力出現了更快捷的解決方案。

透過在現有背景之上合併半透明的深色圖層，您可以毫不費力地實現所需的變暗效果。此方法使您能夠在無縫過渡背景外觀的同時保持文字的原始顏色。

程式碼範例

要說明此技術，請考慮以下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% 不透明的黑色層疊加。其結果是一個雅緻且略暗的背景效果，可以無縫適應不同的背景顏色。

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

以上是如何在不查找新的十六進位代碼的情況下使懸停時元素的背景變暗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！