我正在使用rgba mixin之类的rgba('#2f305a',0.8),效果很好,但我想更进一步。我需要在不透明度后使颜色看起来像是固体一样的颜色。我以为我看到了一段功能,但是似乎无法找到它。我们在那里还是有人有?我尝试转换this并执行此操作:
@function alphaCalc($desiredColour, $desiredAlpha, $backgroundColour: white) {
$r3: red($desiredColour);
$g3: green($desiredColour);
$b3: blue($desiredColour);
$r2: red($backgroundColour);
$g2: green($backgroundColour);
$b2: blue($backgroundColour);
$r1: ($r3 - $r2) / $desiredAlpha + $r2;
$g1: ($g3 - $g2) / $desiredAlpha + $g2;
$b1: ($b3 - $b2) / $desiredAlpha + $b2;
@return rgba($r1, $g1, $b1, $desiredAlpha);
}
.someEl {
background-color: alphaCalc(#2f305a,0.8);
}
问题是我收到错误: “$ red:'rgba'的颜色值-5必须在0到255之间”
r3 = 47; r2 = 255; r1 =(47-255)/0.8+255 = -5
所以似乎公式已关闭或我在这里遗漏了什么?有人有解决方案吗?
答案 0 :(得分:0)
为了确保您始终使用正数,您需要使用abs()
函数:
@return rgba(abs($r1), abs($g1), abs($b1), $desiredAlpha);