如何将元素的背景颜色与 2 种半透明元素背景颜色匹配
Posted
技术标签:
【中文标题】如何将元素的背景颜色与 2 种半透明元素背景颜色匹配【英文标题】:How to match an element's background colour with 2 semi-transparent element background colours 【发布时间】:2014-10-14 12:57:30 【问题描述】:我发了jsfiddle
在小提琴中有 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);
非常感谢您提供任何帮助,
谢谢
【问题讨论】:
见hslpicker.com 为问题添加更多标签。这个问题并不特定于 JavaScript、jQuery 或 CSS。您需要为此可能已经存在于许多其他语言中的通用算法。也许是“颜色”、“颜色处理”? @Zaqx 我意识到这并不特定于 jQuery 或 JavaScript,如果有任何其他语言存在此代码,或者有人能够创建它,我愿意接受它作为一个答案,它也会帮助我。我认为 jQuery 和 JavaScript 对大多数人来说会更容易。我实际上在 C# 中使用它,但是在 jsfiddle 上显示它证明比包含其他语言更简单 我已将 C 和 C# 添加为标签 【参考方案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;
【讨论】:
非常感谢!代码不需要解释我已经弄清楚你是如何做到的。如果您愿意,您可以为问题的未来可能查看者添加解释,尽管这不是必需的。除以零对我来说不是问题,因为这些元素将保持 0.7 的不透明度,因此我不需要修复。非常感谢 太棒了。无论如何,我已经添加了一些 cmets。致未来的读者:如果您打算应用此解决方案,请注意代码可能需要更多验证,并且opacity: 0
的计算存在被零除的风险。
我已经稍微改变了实现以摆脱双舍入。另请注意,如果目标颜色和背景颜色之间存在很大差异,则无法找到可以覆盖不透明度 0.7 以获得所需结果的颜色。
谢谢你,我真的很感激这一切【参考方案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 种半透明元素背景颜色匹配的主要内容,如果未能解决你的问题,请参考以下文章