更改汉堡菜单的颜色，使其下方的背景颜色不同答案

【问题标题】：Changing color of burger menu so that it is not the same at the background color underneath it更改汉堡菜单的颜色，使其下方的背景颜色不同
【发布时间】：2016-05-04 16:38:25
【问题描述】：

我正在构建一个单页网站，该网站将有一个固定的汉堡图标来打开菜单。汉堡图标的颜色与某些页面的某些背景颜色相同。因此，当汉堡图标出现在这些页面上时，它将不可见。我正在寻找一种能够在汉堡图标位于具有相同颜色的页面上时更改其颜色的方法。

假设汉堡图标通常是蓝色的，它下面的 div 是白色的，这里汉堡图标保持蓝色。但是如果当汉堡图标到达这个 div 时下一个 div 是蓝色的，它的颜色就会变成白色。

我的汉堡图标是一个空的 div，下面的 css 使它看起来像一个汉堡图标。汉堡图标被包裹在另一个具有固定位置的 div 中。

//HTML Code
<section class="buttonset">
    <div id="nav_list"></div>
</section>

//CSS Code
.buttonset
{
    height: 50px;
    position: fixed;
    top: 53px;
    left: 55px;
    z-index: 1;
}

#nav_list 
{
  cursor: pointer;
  height: 30px;
  width: 41px;
}

#nav_list:before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 0.17em;
    background: #71ADBE;
    box-shadow: 0 6px 0 0 #71ADBE, 0 12px 0 0 #71ADBE;
    border-radius: 2px;
}

我想要的是当它下面的div的背景颜色与汉堡图标的背景颜色相同时，将汉堡图标的背景颜色更改为不同的颜色。

即 if(burger icon = blue & homePage = blue){ burger icon背景颜色变为白色; }

为了实现这一点，我认为代码必须不断运行检查页面的背景颜色是什么，以便能够改变汉堡图标的颜色。

有什么办法可以做到吗？也许使用 javascript 或 jquery 检测页面的背景颜色，然后更改汉堡图标的颜色？

谢谢

【问题讨论】：

我们至少会看到“汉堡”的 HTML，最好是一些 CSS 来帮助你。
请发布您的代码示例或 jsFiddle，以便我们为您的代码问题制定解决方案。
我们可以在 HTML CSS 和 JavaScript 中使用一些通用代码......最可能的解决方案是将当前的 bg 颜色保存在一个变量中，然后使用这个变量将它附加到你的汉堡......当您添加更多详细信息时，我会发布答案并保持更新
我已经更新了我的问题。我希望你能理解我想要达到的目标。谢谢

标签： javascript jquery html css

【解决方案1】：

编辑基于更新 HTML 和 CSS 我创建了另一个小提琴 https://jsfiddle.net/snpsp6as/4/

这是检查主体颜色是否与汉堡颜色匹配，如果匹配，则将汉堡按钮更改为白色。

  var element = document.getElementsByTagName("BODY")[0];
  var style = window.getComputedStyle(element, "");
  var bgColor = style.getPropertyValue("background-color");
  var color = window.getComputedStyle(document.querySelector('#nav_list'), ':before').getPropertyValue('background-color');

  if (bgColor == color) {
    document.styleSheets[0].addRule('#nav_list:before', 'background: white !important; box-shadow: 0 6px 0 0 white, 0 12px 0 0 white !important;'); 
  }

是的，看小提琴https://jsfiddle.net/snpsp6as/

这是在寻找背景颜色blue，如果是blue，它会将文本更改为white

<div id="div1">
  <h1 id="myH1">Blue</h1>
</div>

<script>
  var element = document.getElementById("div1");
  var style = window.getComputedStyle(element, "");
  var bgColor = style.getPropertyValue("background-color");
  alert("The background color is: " + bgColor);
  if (bgColor === "rgb(0, 0, 255)") {
    document.getElementById("myH1").style.color = "white";
  }

</script>

【讨论】：

这看起来很接近我的需要。问题是，当用户到达与汉堡图标具有相同背景颜色的页面时，我希望汉堡图标颜色发生变化。这不能发生一次，但必须在用户使用网站时一直运行
@user3697612 是的，我知道，只要将这个脚本放在页面中，它就会在每个页面上运行
@user3697612 用您的 html 和 css 示例更新您的问题，我将使其工作
我已将 html 和 css 代码添加到我的汉堡图标中
这似乎是我想要的。但是，我想提的一件事是，由于这是一个单页网站，因此不同的页面只是不同的 div，而不是真正不同的页面。当它下面的div的背景颜色与汉堡图标的颜色相同时，我该如何更改汉堡图标的颜色？

【解决方案2】：

免责声明：这只是一般代码，将在问题得到一些细节时更新。

var bgcol = $(this).css('background-color');

我们保存背景的bgcolor。在示例中，背景被选择为这样。

$(this).css('background-color', bgcol);

在这个例子中为你的汉堡添加背景汉堡被选为这个。

【讨论】：

【解决方案3】：

我会使用您想要的颜色分量的分析。这是红色的示例（如果您有红色和蓝色图标）：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<body style="background-color: #F00">
<P id=value></P>
<script>
var color = $('body').css("background-color");
var red = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)[1];
//if red is too intense, we might want to avoid using the red icon 
// (although it would be fine on a white background)
if (red > 100) {
  $('#value').html("too red - choose a blue icon");
} else {
  $('#value').html("not too red - chose a red icon");
}
</script>
</body>
</html>

【讨论】：

【解决方案4】：

以编程方式 - 不。至少不是以一种可以在浏览器和平台上普遍工作的方式。最合理的方法（也是无数公司网站使用的方法）是拥有两个版本的图像，并使用（可能）javascript 和一个简单的if 语句来相应地调用它们，该语句检查背景的蓝色值。

如果背景是一张图片，那就有点棘手了，可能需要对每页进行手动干预。

【讨论】：

【解决方案5】：

使用我可以从问题中假设的内容，您正在寻找一种解决方案，该解决方案可以根据汉堡图标是否存在自动更改背景颜色（让我们开始可见）。

if ($(".logo").css('display') == 'none') {
  $("html").css("background-color", "yellow", "!important");
}

理论上，如果徽标专门设置为 none，这应该可以工作。

否则，有额外的 Javascript 来识别徽标是否存在并将其更改为无，如果这是您要查找的内容，则需要编辑您的问题。

Fiddle Link

【讨论】：

不，汉堡图标将始终可见。我想要的是当用户到达与汉堡图标具有相同背景颜色的页面时，汉堡图标颜色会发生变化