Question

我有一个div元素，它具有黑色背景颜色设置和小的不透明度，可以与各种网站背景（白色，灰色，绿色等）融合。有什么办法可以得到该元素的计算颜色吗？我指的是用户可以看到的颜色（所以不透明度+元素背景颜色+网站背景颜色的组合）。

当然这必须通过JavaScript完成，但我找不到这样做的方法或插件。我知道JS中的backgroundColor，但只会返回background-color CSS值：black。

以下是一个示例： http://jsfiddle.net/N6EB8/

非常感谢！

PS：我希望我足够清楚。如果没有，请告诉我。

Answer 1

您可以创建一个宽度为100px，高度为1px的隐藏画布元素，以及从前景色（本例中为黑色）到背景色（本例中为白色）的线性渐变。

然后您可以使用ctx.getImageData（）来获取渐变上给定点的颜色。您使用的x坐标将与div的不透明度相同，但乘以100。

getImageData（）返回的数据可以直接在＆＃; rgba＆＃39;中使用。格式化的背景颜色值。

<div id="myDiv" style="opacity:0.3;"></div>

然后是javascript：

//get the div's opacity
var myDiv = document.getElementById('myDiv');
var divOpc = myDiv.style.opacity;
/*
  To get the opacity, you'll probably want to use 
  jquery's $(myDiv).css('opacity'), unless the opacity is in 
  the 'style' attribute.
  If you wanted to keep it vanilla JS, you could use getComputedStyle().
*/


//create hidden canvas
var cvs = document.createElement('canvas');
cvs.style.display = 'none';
cvs.width = 100;
cvs.height = 1;
document.body.appendChild(cvs);

//give canvas a gradient
var ctx = cvs.getContext('2d');
var grd = ctx.createLinearGradient(0,0,100,0);
grd.addColorStop(0,'black'); //foreground colour
grd.addColorStop(1,'white'); //background colour
/*
  If you wanted to make this dynamic, you would get the 
  current background colour of the foreground/background element, 
  instead of hard-coding a colour.
*/
ctx.fillStyle = grd;
ctx.fillRect(0,0,100,1);

//The Magic!
var imgData = ctx.getImageData((100 - divOpc*100),0,1,1);
var formattedBG = 'rgba('+imgData.data[0]+','+imgData.data[1]+','+imgData.data[2]+',1)';
//Do something with that discovered bg colour.
//As an example: Give the background to a different div
var bgRecipient = document.getElementById('bgRecipient');
bgRecipient.style.backgroundColor = formattedBG;

工作jsFiddle：http://jsfiddle.net/zbC9u/6/

编辑：我更新了小提琴，以便与您的相符。

获得半透明黑色div的结果背景颜色？

1 个答案: