如何使用SCSS颜色函数来模拟白色透明覆盖层？

Question

如何使用SCSS颜色函数来模拟白色透明覆盖层？

csssass

5

我正在尝试使用SCSS来模拟一个白色透明颜色覆盖在另一种实心颜色上的效果。我可以很容易地在覆盖层

上使用background-color: rgba(255, 255, 255, .5)，但我更希望有一种不需要浏览器支持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%);
}

更新

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

- Philip Walton

2个回答

0

我不明白改变亮度怎么会像伪造一个白色透明叠加层。此外，我认为你无法使用sass实现你想要的效果，因为你需要知道底部颜色才能给顶部颜色赋值。

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

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

话虽如此，我个人认为在谈论使用rgba时，我们应该把IE9及以下版本放在一边，因为给它们提供支持太麻烦了，而且通常不值得。

编辑：

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

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

它将导致你的背景颜色变亮50％。基本上，你完成了所有的工作，但是使用的是50％而不是150％ :)

- scumah

当我说我不知道底部颜色的值时，我的意思是我不想预先知道。换句话说，任何人都可以为底部颜色输入任何值，SCSS函数将正确计算透明度的结果。我想使用SCSS实现这一点，而不是使用图像。 - Philip Walton

我更新了答案，你在问题中已经完成了大部分内容 :P - scumah

你有在 jsFiddle 上查看过吗？当我使用 50% 时，我看到的颜色完全不同，而不仅仅是相同颜色的不同阴影。也许这是 jsFiddle 对 SCSS 实现的一个 bug。 - Philip Walton

我已经测试过了，我非常确定scss。你可以在这里测试它（http://sass-lang.com/try.html），结果与jsFiddle的非常不同。 - scumah

@scumah：使用50％透明度得到的颜色确实不同，比奇怪的红色更接近，但如果您试图模仿50％不透明度的白色，则仍然是错误的颜色。它是一种明亮的冬青绿色，而不是略带绿色的白色。 - Chuck

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chuck · Accepted Answer

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

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