Question

是否可以看到div的继承背景颜色？

如何获取html元素继承的颜色？默认情况下元素是透明的。因此，当div放置在某个地方时，它不会显示在渲染中（但如果该div的背景颜色为红色，则会立即显示）。如果没有明确的背景颜色，我该如何找到隐含颜色？

以下是一些示例代码。在艾菲尔铁塔的图片的左上方有一个1px乘1px的div。该div的背景颜色是什么？

<html>
<body style="margin: 0px;">
<img src="http://www.eiffel-tower.us/Eiffel-Tower-Images/eiffel-tower-landmark-4.jpg">
<div style="position: absolute;top: 0px; left: 0px; width: 1px; height: 1px;z-index:1">
</div>
</body>
</html>

Answer 1

每个人都会推荐的方法，遗憾的是在所有情况下都不起作用..

您可以使用元素 parent -property遍历节点树，检查是否有任何元素具有明确的 background-color 。

这种方法的问题在于，无法识别设置为位于其父级之外的元素（例如，使用具有适当兄弟值的 position：relative ）。

任何便携式和100％解决问题的解决方案？

我能想到的唯一可移植的方法总是会产生正确的结果，就是找到元素在浏览器中的位置（x，y）。

然后遍历所有元素以查看是否有任何元素（x，y）导致它位于 needle-element 后面，然后检查此元素是否具有背景颜色属性与否。

这保证可行，但会对性能产生非常严重的影响。如果你确定一个元素不会在它的边界之外浮动它的真正的父元素，那就使用所描述的第一个方法。

如果您希望此方法适用于具有图像作为背景属性的元素，您可以将所述图像加载到画布上并读取您想要的像素值，尽管这样可以提高性能吸吮手术更吸吮，但它会起作用。

同时;

如果元素浮动在多个元素之上，会怎么样？

应该在实现您所描述的内容的函数中返回哪种颜色？

颜色在针元素的中心，或者在左上角闪耀？

元素浮动4个不同的元素，这是元素背景颜色？

^{没人知道..}

Answer 2

嗯，你可以尝试这样的事情：

window.getComputedStyle = window.getComputedStyle || function(x) {return x.currentStyle;}
function getActualBackgroundColor(elem) {
    while(elem && window.getComputedStyle(elem).backgroundColor == "transparent")
        elem = elem.parentNode;
    return elem ? window.getComputedStyle(elem).backgroundColor : "transparent";
}

但是，请记住，这只会对静态定位的元素（即不是position: absolute/relative/fixed）可靠地起作用，这些元素没有浮动且父母没有背景图像。

Answer 3

如果div从父元素继承了背景颜色，您实际上会在div中看到它。这是层叠样式表的美妙之处; - ）

因此，为了找到隐含的背景颜色，您必须向上移动DOM树，直到找到具有背景颜色集的父元素。

这很容易用例如适用于Firefox的Firebug或适用于Chrome等的开发人员工具

Answer 4

你在这里真正做的是截取部分网页的1x1屏幕截图。试试这个问题：https://stackoverflow.com/questions/7618368/how-to-capture-the-screen-using-javascript

结论似乎是（除了特殊扩展，插件等），这样做的方法是使用html2canvas：Using HTML5/Canvas/JavaScript to take screenshots

Answer 5

您可以递归地定义一个传递jQuery对象的函数，该对象检查背景属性。

function get_inherited_bg(jquery_object) {
    if (jquery_object.css("background") != "rgba(0, 0, 0, 0) none repeat scroll 0% 0%") {
        return jquery_object.css("background");
    }
    return get_inherited_bg(jquery_object.parent());
}

享受并祝你好运！

是否可以看到div的继承背景颜色？

5 个答案:

每个人都会推荐的方法，遗憾的是在所有情况下都不起作用..

任何便携式和100％解决问题的解决方案？

元素浮动4个不同的元素，这是元素背景颜色？