Question

在小提琴中有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);
}

非常感谢任何帮助，

谢谢

Answer 1

检查小提琴here是否有纯粹的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;

Answer 2

根据你的小提琴，我相信你通过这样做得到了颜色：

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);

如何将元素的背景颜色与2个半透明元素背景颜色相匹配

2 个答案: