使用javascript合并颜色

假设我有一些元素，有背景色和前景色。
假设两种颜色可以以不同的格式指定（任何可以在样式属性中指定的颜色），例如背景=‘白色’或‘透明’，前景=‘rgb（0，0，0）’。
使用纯javascript合并这些颜色以获得类似rgb（128、128、128）的结果的最简单方法是什么

谢谢。

您可能需要调查一下。它“接受一个字符串并试图从中找出一个有效的颜色”。也就是说，您可以简单地查看元素上的CSS color属性，通过这个JS提供它，并获得RGB值。获得RGB值后，只需取每个通道的平均值即可创建新颜色

---

如果元素的颜色是继承的，则可能需要进行一些精细处理。e、 例如，如果您的元素没有指定的颜色属性，请检查它的父元素，一直到DOM。

我相信将前面元素的

opacity

CSS属性设置为一半（

0.5

）将使您达到目标

或者，如果您正在使用jQuery，并且确实希望将其转换为JavaScript，那么可以使用jQuery获得两种颜色，它返回类似于

rgb（0,0,0）

，然后对每种基本颜色（红色、绿色、蓝色）进行平均，并使用相同的指令（）将结果值设置为所需的任何颜色

---

它有用吗？

只是因为我喜欢写复杂的脚本

<span style="background-color:black; color:#fff";>Hi</span>

Hi

JS:

函数getColorVals（颜色）{ 颜色=颜色。替换（“rgb”）。替换（（“，”）。替换（“）”，”）； 返回颜色。拆分（“，”）； } var span=document.getElementsByTagName（“span”）[0]； var color1=window.getComputedStyle（span）.backgroundColor//getComputedStyle确保返回rgb var color2=window.getComputedStyle（span）.color； var color1Vals=getColorVals（color1）； var color2Vals=getColorVals（color2）； var newColorVal=“rgb（”； 对于（i=0；i<3；i++）{ newColorVal+=Math.round（（Math.abs（color1Vals[i]-color2Vals[i]）/2））；

---

如果（i+1-您应该将两个不透明度都设置为.5，否则显示的颜色将比两个商定的实际合并颜色更暗，这比我的答案简单得多，应该适用于您的目的。@trey我不同意（顺便说一句，谢谢您的投票）.我做了一个基准测试，它告诉我，如果我将第一个和第二个元素的不透明度都设置为.5，它实际上会更亮，但也会比我们想要的颜色更亮（设置第一个元素的不透明度确实对我有效）。你有没有其他例子证明？如果有，我会更正我的答案..css（）可以返回字符串“transparent”作为结果根据我对图形的经验，两种重叠颜色都设置为50%不透明度。它们创建了一个不同的颜色部分，具有100%的不透明度。因此，合并区域越饱和，距离实际混合颜色越远。getComputedStyle（span）.backgroundColor可以将字符串“transparent”作为result@MykhayloAdamovych是的，我没有支持透明度/不透明度。您可以轻松捕获“透明”并用其他内容替换它，或者使用

rgba

而不是

rgb

（在这种情况下，透明的rgba值为“rgba（0,0,0,0）”

function getColorVals(color) {
    color = color.replace("rgb", "").replace("(", "").replace(")", "");
    return color.split(",");
}
var span = document.getElementsByTagName("span")[0];
var color1 = window.getComputedStyle(span).backgroundColor; //window.getComputedStyle ensures getting back rgb
var color2 = window.getComputedStyle(span).color;
var color1Vals = getColorVals(color1);
var color2Vals = getColorVals(color2);
var newColorVal = "rgb(";
for (i = 0; i < 3; i++) {
    newColorVal += Math.round((Math.abs(color1Vals[i] - color2Vals[i]) / 2));
    if(i<2) newColorVal += ",";
} 
newColorVal += ")";
alert(newColorVal);