Sass/Compass混合器用于确定透明度/RGBA后的颜色

Question

我正在使用一个类似rgba('#2f305a',0.8)的rgba混合，它运作良好，但我想更进一步。我需要让透明度后的颜色看起来与实心颜色相同。我记得以前看过一个函数可以实现这个功能，但现在找不到了。是否有人知道或者拥有这个函数？我尝试转换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: 颜色值-5必须在0和255之间为'rgba'”

r3 = 47; r2 = 255; r1 = (47-255)/0.8+255 = -5

所以似乎这个公式有问题，或者我漏掉了什么？有人有解决方案吗？

- fanfavorite

---

澄清一下：如果您将一个半透明的红色元素覆盖在蓝色元素上面，您想要的红色元素是更加红但仍然半透明，还是希望它是紫色且不透明的？ - cimmanon

尝试在最终结果上使用abs()函数（例如abs($r1)），看看是否能得到所需的效果。 - cimmanon

是的，我正在尝试这个，并且它似乎给出了正确的颜色，但它的不透明度似乎是1而不是所给定的值。 - fanfavorite

如果您发布了那个答案，我会将其标记为正确的！ - fanfavorite

你是否确实得到了完全匹配？我尝试使用一个不透明的$desiredColour div来覆盖它，但是看到了一点差异。 - Kukosk

Answer 1

为了确保你始终使用正数进行操作，你可以使用 abs() 函数：

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

- cimmanon