如何从 CSS 十六进制颜色代码生成较暗的颜色？ [复制]答案

【问题标题】：How do I generate a darker color from a css hex color code? [duplicate]如何从 CSS 十六进制颜色代码生成较暗的颜色？ [复制]
【发布时间】：2021-12-31 11:38:42
【问题描述】：

我不能使用filter: brightness()，因为它会使整个元素变暗，包括相同的颜色和背景颜色。白色背景上的白色文字无法阅读。

我希望使元素的 background-color 值变暗并保持 color 值的外观相同。

【问题讨论】：

显然它只适用于hover，因为这个选择器是:hover，只需删除该部分，它就会“不在悬停时”工作:) 这不会使它变暗，而是变亮。 ..
您需要向我们展示您的 HTML 结构。最好在一个工作的 sn-p 中，这样我们就可以自己看到 - 它使建议变得更加容易，例如伪元素可能会有所帮助。您是要使背景或文本变暗还是两者都变暗？
Dynamically change color to lighter or darker by percentage CSS 有用吗？否则，您是否考虑过使用 SASS 或 LESS 来编写 CSS？
你可以使用一个绝对定位的伪元素在你的 HEX 颜色元素的“后面”，然后在它上面运行过滤器
我会改成 hsl()，它更容易通过改变亮度值来变亮或变暗

标签： css

【解决方案1】：

这是一个便宜但非常灵活且几乎在所有地方都支持的解决方案，使用 background-image: linear-gradient() 和纯白色/黑色：

div{
  height:5em;
  width : 5em ;
  display:inline-block;
}

div.lighter:hover{
 background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) ;
}

div.darker:hover{
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) ;
}

<div class='lighter' style='background-color:Red;'></div>
<div class='darker' style='background-color:Red;'></div>

您可以更改rgba 最后一个值内的不透明度百分比，或者如果需要甚至使用一些灰色/其他颜色！由于background-image 显示在background-color 后面而不擦除任何内容，这是我经常用于类似情况的解决方案。

【讨论】：

【解决方案2】：

我只想使背景颜色变暗，不考虑颜色。

如果您将显式 z-index: 0 应用于元素，则可以将具有以下属性的 ::before 伪元素附加到元素：

background-color
opacity，将伪元素的background-color 与元素的background-color 混合
z-index 低于0，因此伪元素的半透明background-color 位于所有元素内容的下方

工作示例：

div {
  position: relative;
  display: inline-block;
  z-index: 0;
  width: 140px;
  height: 140px;
  line-height: 140px;
  margin-right: 12px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 0);
}

.darker::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
}

<div>Normal Background</div>
<div class="darker">Darker Background</div>

【讨论】：