如何在不查找新的十六进制代码的情况下使悬停时元素的背景变暗？

使用 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"></div>

以上是如何在不查找新的十六进制代码的情况下使悬停时元素的背景变暗？的详细内容。更多信息请关注PHP中文网其他相关文章！