可以查看div元素的继承背景颜色吗？

Question

可以查看div元素的继承背景颜色吗？

5

有没有办法查看 div 继承的背景颜色？

如何获取 HTML 元素继承的颜色？默认情况下，元素是透明的。因此，当一个 div 放置在某个位置时，它不会在渲染中显示出来（但如果该 div 的背景颜色为红色，则会立即可见）。如果没有显式指定背景颜色，如何找到隐式的背景颜色？

以下是一些示例代码。有一个 div 在埃菲尔铁塔的图片左上角，大小为 1px x 1px。那个 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>

- Travis J

可能重复：https://dev59.com/NW445IYBdhLWcg3wLXMK - Ram

你想用什么方式来查找它？使用JavaScript、CSS还是其他方式？ - dezman

@watson - 无论如何。 - Travis J

@Raminson - 我不认为这是重复的。让我解释一下，我正在寻找位于div位置的颜色，这并不一定意味着在那里定义了显式颜色属性。 - Travis J

5个回答

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），且它们没有浮动，并且其父元素没有背景图像。

- Niet the Dark Absol

2

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

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

例如，使用Firefox的Firebug或Chrome等开发者工具非常容易完成此操作。

- Horen

如果显示的颜色不是来自background-color属性呢？ - Travis J

这可能意味着您在图像上方有一个带有成千上万种不同颜色的 div。据我所知，没有办法使用 JavaScript 自动获取这些像素的颜色。如果我错了，请纠正我。 - Horen

如果div只有1px乘1px会怎么样？ - Travis J

我认为这是不可能的。你只能直接获取CSS属性中包含的颜色，而且你需要准确知道div所在的位置。唯一（自动化）的解决方法我能想到的是截屏并比较该位置上的颜色与div的位置。尽管如此，这需要大量糟心的工作，并且在不同的浏览器渲染中可能会出现很多问题... - Horen

我认为这并不容易实现。也许可以通过检测元素下方的类型来确定颜色，然后采用相应的方法。在CSS中，可以根据位置将图像的一部分映射到较小的图像，例如jQuery.ui。 - Travis J

2

你所做的实际上是对网页部分进行1x1的截屏，尝试这个问题：https://stackoverflow.com/questions/7618368/how-to-capture-the-screen-using-javascript 结论似乎是（除非使用特殊扩展、插件等），使用 html2canvas 可以解决问题：使用 HTML5/Canvas/JavaScript 进行截屏。

- ecatmur

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());
}

祝你好运，愉快地享受吧！

- Daniel Li

如果该div位于某个被某种颜色而非背景颜色所填充的元素之上呢？ - Travis J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Filip Roséen - refp · Accepted Answer

所有人都会推荐的方法，但在某些情况下不起作用..

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

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

有没有可移植且100％有效的解决方案？

我能想到的唯一便携式方法是找到您的元素在浏览器中的（x，y）位置。

然后迭代所有元素，查看任何元素（x，y）的结果是否在needle-element后面，然后检查该元素是否具有background-color属性。

这是保证有效的，但对性能影响非常大。如果您确定元素不会将自己漂浮到其真实父级的范围之外，请使用第一种方法描述。

如果您希望此方法适用于具有图像背景属性的元素，则可以将所述图像加载到画布上并读取所需像素的值，尽管这将使已经吸氧的操作更加吸氧，但它将起作用。

另外;

如果元素浮动在多个元素上方怎么办？
实施您所描述的函数应返回哪种颜色？
您的needle-element中心透射出的颜色，还是左上角的颜色？

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

floating div over 4 divs

^{没有人知道..}