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

Question

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

我的问题是:如何为元素获取有效的背景色，即使该背景色可能是从父级继承的(可能一直到主体)。

这是一个简化的示例，我想在其中找到 .color-me 的背景颜色

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

还有一个代码笔:http://codepen.io/evanhobbs/pen/FbAnL/

Answer 1

考虑到一些(非常重要的)注意事项，这是可能的。 zzzzBov在对问题的评论中很好地总结了它们:

... the complexity comes in when you need to start taking into account background images, gradients, rgba values, and opacity. It's relatively simple to get the color of the nearest parent with a non-transparent background color, it just might not be the actual color behind the element.

有了这些注意事项，基本上您必须获取元素的背景颜色，如果它是透明的，则转到父元素，等等。

不同的浏览器对“透明”有不同的看法，这里有一个涵盖大部分的例子:Updated Pen

$(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)计算颜色值的浏览器。