Question

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

似乎SCSS color functions中的一个应该能够达到这个效果，但我已经尝试了一些东西，而且我似乎无法让它发挥作用。

有谁知道怎么做？

这是一个演示，可以更好地说明我正在尝试做什么，或者您可以看到下面粘贴的代码。 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%);
}

的更新

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

Answer 1

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

要获得所需效果，只需使用mix($background, white, 50%)即可。这将执行与使用alpha合成颜色的相同类型的混合。

Answer 2

我不知道如何改变亮度会像伪造白色透明覆盖层一样。此外，我不认为你可以使用sass达到你想要的效果，因为你需要知道你的底色，以便为顶级颜色赋值。

如果你不能使用rgba并且不知道底色是什么，你可以使用白色透明10x10px png作为背景。如果您需要IE6支持，请使用IE png fix或filters（不符合w3c标准的afaik）。

.overlay {
    background: transparent url('transparent-white.png') repeat;
{

话虽如此，我的拙见是我们应该离开IE9＆lt;在讨论使用rgba时，它太过于凌乱而无法给予支持，而且一般都不值得。

编辑：

您正在使用值为150％的$lightness属性，而它只接受0％到100％之间的值。如果你使用0％你得到相同的颜色，而使用100％你得到白色。如果背景颜色是实心的，您可以像在问题中所说的那样使用scale_color函数：

.scss {
    background-color:scale-color($background, $lightness:50%);
}

它会产生背景色，但重量减轻50％。基本上你完成了所有的工作，但使用50％而不是150％：）

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

2 个答案: