5

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

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

这是一些示例代码。埃菲尔铁塔图片的左上角有一个 1px x 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>
4

5 回答 5

5

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

您可以使用元素parent属性遍历节点树，检查是否有任何元素具有显式background-color。

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

有任何便携式和 100% 有效的解决方案吗？

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

然后遍历所有元素以查看是否有任何元素 (x,y) 导致它位于针元素后面，然后检查该元素是否具有背景颜色属性。

这可以保证工作，但会对性能产生非常严重的影响。如果您确定元素不会将其自身浮动到其真正父级的边界之外，请使用所描述的第一种方法。

如果您希望此方法适用于具有图像作为背景属性的元素，您可以将所述图像加载到画布上并读取您想要的像素的值，尽管这会使已经性能下降的操作甚至更吸吮，但它会工作。

还有；

  • 如果一个元素浮动在多个元素之上怎么办？
  • 在实现您所描述的功能的函数中应该返回哪种颜色？
  • 颜色在你的针元素的中心闪耀，或者在左上角？

元素浮动在 4 个不同的元素上，元素的背景颜色是什么？

浮动 div 超过 4 个 div

没人知道..

于 2012-07-18T18:16:48.903 回答
4

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

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非浮动且其父级没有背景图像的静态定位元素（即 not ）。

于 2012-07-18T18:17:05.557 回答
2

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

结论似乎是（除非有特殊的扩展、插件等）使用html2canvas的方法是：使用 HTML5/Canvas/JavaScript 截取屏幕截图

于 2012-07-18T19:03:10.713 回答
2

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

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

这真的很容易做到，例如 Firefox 的 Firebug 或 Chrome 的开发者工具等。

于 2012-07-18T18:17:11.657 回答
1

您可以递归地定义一个函数，该函数传递一个检查背景属性的 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());
}

享受和好运！

于 2012-07-18T18:16:26.523 回答