如何获取网站的背景颜色

How to get background color of a site?

本文关键字：网站 背景 颜色 获取 何获取      更新时间：2023-09-26

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

但例如这个网站：性能自行车车身的背景颜色是黑色，并且"很明显"该网站的主要背景颜色是白色。

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

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

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

替代方案包括截取页面的屏幕截图并从中确定背景颜色。

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

这样的事情呢？

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

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)

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

改进：

  • 首先浏览并将所有文本内容替换为" "
  • 为最靠近屏幕边缘的像素赋予额外的权重。

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

另一个不错的解决方案是使用浏览器插件。我使用滴管进行镀铬。

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

或者你可以使用Firefox的colorPicker。要获取它，请在您的火狐浏览器中转到：

工具 ->

附加组件 ->右上角的搜索栏查找"颜色选择器"

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

相关文章：