Css 色彩数学：透明黑色覆盖对亮度的影响

我最近一直在玩，发现这个功能非常有用，它通过将颜色的HSL“亮度”成分减少一定量来工作。有一次，我尝试在以下上下文中从半透明的黑色覆盖层转换为等效的

darken

应用程序：

• 容器背景：

  $color

  （任何颜色）
  • 内容背景：

    变暗（$color，20%）

    （暗20%）
    • 标题背景：

      rgba（0,0,0,0.2）

      （20%不透明度黑色叠加）

我原以为我可以用

深色（$color，36%）

（80%明度×80%明度=64%明度）替换标题背景，但颜色要暗得多。产生视觉相似结果的值约为25%

显然，100%的不透明度等于0%的亮度，0%的不透明度等于100%的亮度，但在这两者之间的比例似乎是线性的透明度和。。。不适用于亮度（因为暗度基本上是从亮度分量中减去的）

所以，我的问题是如何将半透明的黑色覆盖层转换为等效的亮度降低？有可能吗

这里有一个例子来说明我的意思：-我想找到一个公式来计算

.box.three

的黑暗百分比，来自

.box.three

的不透明度

编辑： @cimmanon提到，该函数可用于创建与

mix（$color，black，80%）相同的效果

——我仍然有兴趣知道这种混合与变暗/变亮之间是否存在关系

编辑： 我意识到这其实很简单，

darken

函数只是减去绝对值，例如：

darken(blue, 20%) = hsl(hue(blue), saturation(blue), lightness(blue) - 20)

而与黑色混合是一种百分比减少，因此：

mix(blue, black, 80%) = darken(blue, lightness(blue) * 0.2)

---

还有一个必需的提琴：

您想要使用的函数是

mix（）

。因为你的黑色是80%透明（20%不透明），你需要调整混合物的重量以支持第一种颜色

.foo {
    background: mix(blue, black, 80%);
}

---

真是太棒了！我仍然很想知道混合黑白和变暗/变亮之间是否有关系，所以我暂时不谈。你最初的问题得到了回答，你有需要进一步调查的信息。如果你想问一个不同的问题，那么你可以问一个不同的问题。你已经提供了一个半透明黑色覆盖的功能替代方案，但是我的问题“如何将半透明黑色覆盖转换为等效的亮度降低”尚未得到回答。