Sass/Compass Mixin 用于确定不透明度/RGBA 后的颜色答案

【问题标题】：Sass/Compass Mixin For Determining Color After Opacity/RGBASass/Compass Mixin 用于确定不透明度/RGBA 后的颜色
【发布时间】：2014-08-11 11:03:22
【问题描述】：

我正在使用像 rgba('#2f305a',0.8) 这样的rgba mixin，效果很好，但我想更进一步。我需要使不透明度后的颜色看起来与实心颜色相同。我以为我看到了一个不久前可以做到这一点的函数，但似乎找不到它。我们那里有一个还是有人有一个？我尝试转换 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

所以看起来公式已经关闭或者我在这里遗漏了什么？有人有解决办法吗？

【问题讨论】：

澄清一下：如果你将一个半透明的红色元素覆盖在一个蓝色元素上，你想要红色元素你想要一个更红但仍然透明或紫色和不透明的值？
所以如果红色超过蓝色，它看起来仍然是相同的红色，只是具有透明度。
尝试对最终结果使用abs() 函数（例如abs($r1)），看看是否能达到您想要的效果。
是的，我在玩它，它似乎给出了正确的颜色，但它的不透明度似乎是 1 而不是给出的
确实如此，我的错。有我正在测试的东西的背景。谢谢！

标签： css sass compass-sass

【解决方案1】：

为确保您始终使用正数，您需要使用abs() 函数：

@return rgba(abs($r1), abs($g1), abs($b1), $desiredAlpha);

【讨论】：