如何使用javascript/jQuery获取透明元素的有效背景颜色

Question

基本上,我在页面上有一个元素可以插入多个不同的位置.它没有背景颜色设置,但根据插入位置的背景颜色,我可能想对它进行一些更改.

我的问题是:如何获得元素的有效背景颜色,即使背景颜色可能是从父元素继承的(可能一直到主体).

这是一个简化的例子,我想找到.color-me的背景颜色

<div class="cont">
   <div class="color-me">what's my background-color?</div>
</div>

和一个codepen:http://codepen.io/evanhobbs/pen/FbAnL/

Answer 1

鉴于一些(非常重要的)警告,这是可能的.zzzzBov在对这个问题的评论中总结得很好:

......当您需要开始考虑背景图像,渐变,rgba值和不透明度时,复杂性就会出现.使用非透明背景颜色获取最近父级的颜色相对简单,它可能不是元素背后的实际颜色.

有了这些警告,基本上你必须得到元素的背景颜色,如果它是透明的,转到父元素,依此类推.

不同的浏览器有不同的"透明"视图,这里有一个覆盖其中大部分的例子:更新笔

$(function() {
  var bc;
  var $elm = $(".color-me");
  while (isTransparent(bc = $elm.css("background-color"))) {
    if ($elm.is("body")) {
      console.log("Gave up");
      return;
    }
    $elm = $elm.parent();
  }
  console.log("Effective color: " + bc);

  function isTransparent(color) {
    switch ((color || "").replace(/\s+/g, '').toLowerCase()) {
      case "transparent":
      case "":
      case "rgba(0,0,0,0)":
        return true;
      default:
        return false;
    }
  }
});

我不确定所有浏览器都可以实现这一点,特别是那些rgb不会rgba为计算颜色提供(非)值的浏览器.