Question

让我解释一下。我不是在寻找特定DOM元素的特定属性。我开始想，如果我检查了 body 元素的background-color，我会找到页面的背景颜色。

但是例如对于这个网站：performance bikes身体的背景颜色是黑色，并且“明显”该网站的主要背景颜色是白色

所以，我正在使用 PhantomJS 解析网站。您认为能够找到最“可见”的背景颜色的好策略是什么？我不知道该怎么说，但对于一个人而言，哪种颜色是背景是显而易见的。如何以编程方式找到它？

编辑：自行车网站就是一个例子。我正在考虑如何为“任何”页面执行此操作。

Answer 1

Performance bikes网站的背景颜色为 transparent。但是，由于一些奇怪的原因，他们决定将整个主div置于absolute位置，因此body标记为1px高，从而显示默认值白色。我的一个想法是，你可以检查body的高度是否小于窗口的某个百分比。如果它太小，那么对于某些特殊浏览器，它可能是white或transparent。

替代品，包括页面的taking a screenshot，并从中确定背景颜色。

Answer 2

您可以使用javascript并检查哪个图层位于顶部，也可以检查该div的宽度和高度，然后只需获取其背景颜色属性。

Answer 3

这样的事情怎么样？

不完美，但应该返回最大区域的元素，并确保它是可见的。不会说它低于其他元素，但它是一个开始......

var element={
    width:0,
    height:0,
    color:'',
    jQEl:{}
}

$('*:visible').each(function(){
    var $this = $(this);
    var area = element.width*element.height;
    var thisArea = $this.width()*$this.height();
    if(thisArea>area){
        element.width = $this.width();
        element.height= $this.height();
        element.color=$this.css('background-color');
        element.jQEl=$this;
    }
});

console.log(element)

Answer 4

我会截取屏幕截图，然后制作图像的直方图以找到最常见的颜色。

加细：

首先使用“＆amp; nbsp;”
为最靠近屏幕边缘的像素增加额外的重量。

（要在PhantomJS中完全自动化，您可以使用http://html2canvas.hertzen.com/之类的东西来使用画布，而不需要制作外部图像文件。）

Answer 5

另一个不错的解决方案是使用浏览器插件。我使用Eye Dropper镀铬。

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

或者你可以使用colorPicker for Firefox。为了得到它，在你的Firefox浏览器中，转到：

工具 - ＆gt;附加组件 - ＆gt;右上角的搜索栏查找“colorPicker”

以这种方式查找网站背景颜色要比搜索CSS代码快10倍。

如何获取网站的背景颜色？

5 个答案: