我最近一直在玩SASS，并且找到了darken函数，它通过将颜色的HSL "lightness"组件减少给定量来工作，这非常有用 . 有一次，我最终尝试在以下上下文中将半透明黑色叠加转换为等效的 darken 应用程序：
-
容器背景：
$color（任何颜色） -
内容背景：
darken($color, 20%)（20％更暗） -
Headers 背景：
rgba(0, 0, 0, 0.2)（20％不透明度黑色叠加）
我以为我可以用 darken($color, 36%) （80％亮度×80％亮度= 64％亮度）替换 Headers 背景，但是更暗 . 产生视觉上类似结果的值约为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/
1 回答
您要使用的功能是
mix(). 由于你的黑色是80％透明（20％不透明），你需要调整混合物的重量，而不是第一种颜色 .