如何将一个元素的背景色与两个半透明元素的背景色匹配？

Question

我制作了一个jsfiddle。

在其中有三个div。 1.左边的是紫色的。 2.右边的是蓝色的。 3.上面的蓝色div上方有一个未知颜色的div。

第三个div（悬浮在右侧蓝色div上方）的期望颜色是左侧紫色div的颜色。

问题在于所有div的透明度均为0.7，并且必须保持不变（以便查看它们后面的内容）。

那么，我的问题是如何计算左侧紫色和右侧蓝色之间的差异，以便我可以为第三个div设置一种颜色，使其与左侧紫色div的颜色相匹配，当它覆盖右侧蓝色div时。

我不想通过眼睛猜测，因为我还有很多其他颜色要做到这一点，我只想知道是否有一种计算方法，允许我使用JQuery或Javascript来完成这个任务？

至今我没有任何JS代码，因为我甚至不知道从哪里开始。

HTML

<div id="target" class="opacity purple"></div>
<div id="actualBackground" class="opacity blue"></div>
<div id="sameColourAsTarget" class="opacity purple2"></div>

CSS

div{
    position:absolute;
}
#target{
    left:0px;
    top:0px;
    height:150px;
    width:150px;
}
#actualBackground{
    left:150px;
    top:0px;
    height:150px;
    width:150px;
}
#sameColourAsTarget{
    left:150px;
    top:50px;
    height:50px;
    width:50px;
}
.opacity{
    opacity:0.7;
}
.purple{
    background-color:rgb(152, 3, 214);
}
.blue{
    background-color:rgb(10, 127, 188);
}
.purple2{
    background-color:rgb(175, 3, 150);
}

任何帮助都非常感激，

谢谢

- ctwheels

---

请查看http://hslpicker.com/。 - guest271314

为问题添加更多标签。这个问题不仅限于JavaScript、jQuery或CSS。你需要一个通用的算法，它可能已经存在于许多其他语言中。也许可以加上“颜色”、“颜色处理”？ - Zaqx

@Zaqx 我意识到这不仅限于jQuery或JavaScript，如果有任何其他语言存在此代码，或者有人能够创建它，我也愿意接受它作为答案，这也会对我有所帮助。我假设大多数人认为jQuery和JavaScript更容易。实际上，我正在使用C#，但在jsfiddle上显示它比包含其他语言更简单。 - ctwheels

我已将C和C#添加为标签。 - ctwheels

Answer 1

点击此处查看一个纯JavaScript解决方案的示例。

/**
 * Gets the mixed color obtained by overlaying a front color
 * with the specified opacity over a solid back color.
 */
function mix(back, front, opacity) {
    var mixed = {
        r: (1 - opacity) * back.r + opacity * front.r,
        g: (1 - opacity) * back.g + opacity * front.g,
        b: (1 - opacity) * back.b + opacity * front.b
    }

    return mixed;
}

/**
 * Gets the front color that can be overlaid with the specified
 * opacity over a solid back color to get the same color as the
 * mixed color.
 */
function unmix(mixed, back, opacity) {
    var front = {
        r: (mixed.r - back.r) / opacity + back.r,
        g: (mixed.g - back.g) / opacity + back.g,
        b: (mixed.b - back.b) / opacity + back.b
    }

    return front;
}

/**
 * Converts an rgb string to a color object in the following form
 * {r: 255, g: 255, b: 255}
 */
function rgbToColor(rgb) {
    var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    return {
        r: parseInt(matches[1]),
        g: parseInt(matches[2]),
        b: parseInt(matches[3])
    }
}

/**
 * Converts a color object of from {r: 255, g: 255, b: 255} to
 * an rgb string
 */
function colorToRgb(color) {
    var r = Math.round(color.r);
    var g = Math.round(color.g);
    var b = Math.round(color.b);

    return "rgb(" + r + "," + g + "," + b + ")";
}

// get properties of the back element
var backEl = document.getElementById("actualBackground");
var backStyle = window.getComputedStyle(backEl);
var backColor = backStyle.backgroundColor;
var backOpacity = backStyle.opacity;

// get properties of the target element
var mixedEl = document.getElementById("target");
var mixedStyle = window.getComputedStyle(mixedEl);
var mixedColor = mixedStyle.backgroundColor;
var mixedOpacity = mixedStyle.opacity;

// calculate the actual back color by mixing the back element's
// properties with solid white
var back = mix({
    r: 255,
    g: 255,
    b: 255
}, rgbToColor(backColor), backOpacity);

// calculate the actual target color by mixing the target element's
// properties with solid white
var mixed = mix({
    r: 255,
    g: 255,
    b: 255
}, rgbToColor(mixedColor), mixedOpacity);

// calculate the overlay's color by unmixing the back and the target
// colors with an opacity of 0.7 (could also be retrieved from the overlay element
var front = unmix(mixed, back, 0.7);

// get the overlay's element and apply the calculated color
var frontEl = document.getElementById("sameColourAsTarget");
frontEl.style.backgroundColor = colorToRgb(front);
frontEl.style.opacity = 0.7;

- Robby Cornelissen

---

非常感谢！代码无需解释，我已经弄清楚你是如何做到的。如果您愿意，可以为可能的未来查看者添加说明，但这并不是必要的。对我来说，零除问题并不是问题，因为这些元素将保持在0.7不透明度，所以我不需要修复它们。非常感谢！ - ctwheels

太好了。我已经添加了一些注释。对于未来的读者：如果您计划应用此解决方案，请注意代码可能需要更多的验证，并且在opacity: 0的计算中存在除以零的风险。 - Robby Cornelissen

我稍微改了一下实现方式，以消除双重舍入。此外，请注意，如果目标颜色和背景颜色之间存在很大差异，则不可能找到一个可以使用不透明度0.7叠加以获得所需结果的颜色。 - Robby Cornelissen

谢谢，我非常感激这一切。 - ctwheels

Answer 2

根据你的Fiddle，我相信你是通过这样做来获取颜色的：

var temp = $("#target").css('background-color');
temp = temp.substring(4,14);
temp = temp.split(",");

var temp2 = $("#actualBackground").css('background-color');
temp2 = temp2.substring(4,14);
temp2 = temp2.split(",");

var result = [0,0,0]
for(var i=0; i < result.length; i++){
    result[i] = (parseInt(temp[i]) + parseInt(temp2[i])) / 2
}
result = "rgb("+result[0]+", "+result[1]+", "+result[2]+")";
$("#sameColourAsTarget").css("background-color", result);

- Bla...

---

你没有考虑透明度。在fiddle中尝试你的代码时，它与请求的颜色相差甚远。问题明确说明所有透明度设置必须保持不变。 - Robby Cornelissen