Question

默认情况下，大多数网络浏览器将网页呈现为具有白色背景。但是，这在某种程度上是用户可自定义的，有些浏览器是不同的。所以，我想找到一种方法，通过CSS或JavaScript，找出页面的背景颜色。 Mozilla网站上的文档表明可以使用document.bgColor，其默认值为白色。它还建议不要使用它，因为它已被弃用。但是文档似乎与观察到的行为相冲突：如果页面没有CSS来更改它，则document.bgColor是一个空字符串。替代方案建议不要工作：我尝试的一切都给了我一个空字符串或者＃34;透明＆＃34;，这显然是错误的：我看不到浏览器下面的桌面，因此它不透明。（顺便说一句，IE11实际上就像Mozilla的文档说Firefox一样。去看看。）

我想创建一个html列表元素（<ul>），其背景颜色与文档的背景颜色相匹配。这可能吗？（我想你可能会想问：如果我想让它与背景相匹配，那么透明＆＃34;我想要什么？不。我希望它能掩盖其他一些元素。为什么？因为我正在制作其中一个自动建议的东西。）

编辑：2个人明智地建议我添加一个例子，以便我明白我在谈论什么。根据我收到的答案，这两个人是完全正确的。我在其中一个答案的评论中添加了一个小提琴的链接，现在我在这里添加：

https://jsfiddle.net/ftgu97fj/5/

Answer 1

您可以使用CSS2 system colors - 请注意，这些在CSS3中已弃用，建议使用外观属性。

~~ul { background-color: Background; }~~ /* this should be desktop background */

ul { background-color: Window; } /* this is browser background */

Answer 2

编辑：JanTuroň找到了一种使用CSS2系统颜色的方法;请听从他的回答。请注意，系统颜色已弃用，window是默认背景颜色。

基于this post中有关突出显示文本的背景颜色的答案，似乎这可能不可能;相关问题也是特定于浏览器的非常类似的选择：

Kaiido：

我会说你做不到。

getComputedStyle（yourElement，':: selection'）。backgroundColor和getComputedStyle（yourElement，':: - moz-selection'）。backgroundColor将返回透明作为默认值，浏览器不会覆盖os的默认值。   （值得一提的是，如果将其设置为透明，则默认的os'值将被覆盖）。

我不认为浏览器可以访问操作系统默认首选项，如果他们这样做，他们可能不会让任何网站轻易访问它。

This question建议使用canvas元素来对像素颜色进行采样，但遗憾的是这似乎不起作用;在Chrome中，它会返回0,0,0,0作为未设置像素的颜色。它使用chrome.tabs提供了一个潜在的解决方案，但这仅适用于Chrome扩展程序。

我能想到的唯一可能是使用HTML2Canvas之类的东西来“截取”页面并在那里采样一个空像素，但不能保证这个库能够在未设置的背景下正常运行。 / p>

Answer 3

如果<ul>元素是<body>元素的直接后代，您可以使用css inherit关键字

  ul {
    background-color: inherit;
  }

Answer 4

由于OP上的评论越来越长，以下是我建议您尝试的内容：

window.getComputedStyle(document.body)['backgroundColor'])

通过将白色设置为ul的默认背景颜色，应该覆盖在未设置背景颜色的页面（例如空白页面）上正确显示autosuggest的用例。如果你想考虑可能的背景图像，它会变得更成问题。

另请注意，html也可以background-color，body的大小可能会受到限制而无法覆盖整个视口。看到这支笔：

http://codepen.io/connexo/pen/jrAxAZ

这也说明，如果身体真正透明，您希望在浏览器后面看到您的桌面是错误的。

Answer 5

This will definitely solve the problem! check how the js function works

function getBackground(jqueryElement) {
    // Is current element's background color set?
    var color = jqueryElement.css("background-color");
    
    if (color !== 'rgba(0, 0, 0, 0)') {
        // if so then return that color
        return color;
    }

    // if not: are you at the body element?
    if (jqueryElement.is("body")) {
        // return known 'false' value
        return false;
    } else {
        // call getBackground with parent item
        return getBackground(jqueryElement.parent());
    }
}

$(function() {
    alert(getBackground($("#target")));
    document.getElementById("ul").style.backgroundColor = getBackground($("#target"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<ul id= "ul" style="background-color: red">
    <p id="target">I'd like to know that the background-color here is red</p>
</ul>

我保持提示以便您更好地理解

获取文档的背景颜色

5 个答案: