如何使用SCSS颜色功能模拟白色透明覆盖？

Question

我正在尝试使用SCSS伪造一种覆盖另一种纯色的白色透明色.我可以轻松地background-color:rgba(255,255,255,.5)在叠加层上做<div>,但我宁愿有一个解决方案,不需要浏览器支持rgba颜色.此外,由于我使用SCSS变量,我不一定知道底色是什么,所以我需要计算结果.

似乎其中一个SCSS颜色函数应该能够实现这个效果,但我已经尝试了一些东西,而我似乎无法让它工作.

有谁知道如何做到这一点？

这是一个演示,以更好地说明我正在尝试做什么,或者你可以看到下面粘贴的代码. http://jsfiddle.net/BRKR3/

HTML

<div class="background">
    <div class="overlay rgba"></div>
</div>

<div class="background">
    <div class="overlay scss"></div>
</div>

SCSS

$background: #009966;

.background {
    background-color:$background;
    height:60px;
    margin:20px;
    padding:20px;
    width:60px;
}

.overlay {
   height:60px;
   width:60px;
}

.rgba {
    background-color:rgba(255,255,255,0.5);
}

/* works if $background is $808080, but not if it's a color */
.scss {
    background-color:scale-color($background, $lightness:150%);
}

UPDATE

这是一个使用Chuck答案的工作jsFiddle:http: //jsfiddle.net/BRKR3/3/

Answer 1

亮度不会将颜色与白色混合; 它使颜色变浅,这意味着它更轻,但组件也更强烈(而与白色混合使它们更柔和).您可以将亮度视为倍增颜色.为了在调整亮度时获得屏幕效果,您需要按比例降低饱和度.

要获得您想要的效果,请使用mix($background, white, 50%).这将执行与使用alpha合成颜色的相同类型的混合.