Question

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

让我们说汉堡图标通常是蓝色的，下面的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＆amp; homePage = blue）{汉堡图标背景颜色变为白色; }

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

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

由于

Answer 1

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

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

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

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

在此示例中将背景附加到您的汉堡包中选择汉堡。

Answer 2

编辑基于更新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/

这是寻找背景颜色蓝色，如果蓝色，它会将文字更改为白色

<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>

Answer 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>

Answer 4

以编程方式 - 没有。至少不会以这种方式普遍适用于浏览器和平台。最合理的方法（以及无数公司网站使用的方法）是拥有两个版本的图像，并使用（可能）javascript相应地调用它们，并使用简单的words[i]语句检查背景的蓝色值。

如果背景是图像，则会变得有点棘手，并且每页可能需要手动干预。

Answer 5

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

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

理论上，如果徽标专门设置为无，这应该有用。

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

Fiddle Link

更改汉堡菜单的颜色，使其与下面的背景颜色不同

5 个答案: