如何使用 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);
}

按钮将显示其原始背景颜色，当鼠标悬停在其上时，会出现微妙的背景颜色无论背景颜色如何，都会应用变暗效果。