Question

我最近一直在玩SASS，并且发现了darken功能，它通过将颜色的HSL“亮度”分量减少给定量来起作用，非常有用。有一次，我最终尝试在以下上下文中将半透明黑色叠加层转换为等效的darken应用程序：

容器背景：$color（任何颜色）
- 内容背景：darken($color, 20%)（20％更暗）
  - 标题背景：rgba(0, 0, 0, 0.2)（20％不透明度黑色叠加）

我以为我可以用darken($color, 36%)替换标题背景（80％亮度×80％亮度= 64％亮度），但是更暗。产生视觉相似结果的价值约为25％。

显然，100％不透明度相当于0％亮度，0％不透明度相当于100％亮度，但在那之间，比例似乎是线性的透明度和......不是为了亮度（由于暗淡基本上从亮度减去组分）。

所以，我的问题是如何将半透明的黑色叠加转换为等同的亮度降低？它甚至可能吗？

这里有一个我的意思的例子：http://jsfiddle.net/R7aYP/2 - 我有兴趣找到一个公式来计算.box.three的不透明度.box.two的黑暗百分比。

@cimmanon提到mix函数可用于与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)

这是一个强制性的小提琴：http://jsfiddle.net/R7aYP/4/

Answer 1

您要使用的功能是mix()。由于你的黑色是80％透明（20％不透明），你需要调整混合物的重量，而不是第一种颜色。

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