javascript - 根据背景颜色改变汉堡菜单的颜色

标签 javascript html css

有一个白色汉堡菜单。问题是在我的元素中，由于背景不透明，它在网站的某些地方不可见。任务是编写一个脚本，该脚本应根据背景颜色将颜色更改为对比色。例如，在下面的代码中，在黑色背景上，菜单应变为白色。最初的计划是为每个 block 分配一个不同的 id，当菜单图标点击一个新的部分时，它会改变颜色。但是由于知识匮乏，js没有起作用。也链接到 codepen:

@import url(https://fonts.googleapis.com/css?family=Quicksand);
html,
body {
   height: 100%;
   background-color: red;
   font-family: 'Quicksand', sans-serif;
   color: white;
}

#menuToggle {
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #000;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul {
  transform: none;
}
<!--    Made by Erik Terwan    -->
<!--   24th of November 2015   -->
<!--        MIT License        -->
<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />
    
    <!--
    Some spans to act as a hamburger.
    
    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>
    
    <!--
    Too bad the menu has to be inside of the button
    but hey, it's pure CSS magic.
    -->
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
    </ul>
  </div>
</nav>


<div class="container" #slide-1>
   <div class="row">
      <div class="col-sm-10 col-sm-push-1 col-md-8 col-md-push-2">
         <h1>Full Screen Burger Menu</h1>
         <h3>Click the burger.</h3>
         <p>Lucas ipsum dolor sit amet darth lando qui-gonn mara droid jade qui-gonn skywalker wedge lars. Ben antilles chewbacca palpatine mothma fisto binks mara. Wicket greedo c-3p0 han lars mara darth. Darth binks wookiee mara luuke amidala. Lando kessel jango wicket. Moff jango dantooine luuke skywalker obi-wan. Darth mandalore binks leia solo moff yoda. Darth c-3p0 maul ben jar lando. Jabba ahsoka grievous mandalorians kenobi wookiee chewbacca. Binks calrissian tatooine baba jango k-3po darth calamari yavin.</p>
         <p>Wicket sidious organa skywalker mandalore mon qui-gonn fisto. Leia grievous biggs bespin calamari. Alderaan luuke darth hutt. Vader leia boba kashyyyk dagobah jade kashyyyk. Lars amidala gonk lobot organa. Twi'lek darth gamorrean obi-wan boba moff. Yavin c-3p0 darth darth luke chewbacca han. Skywalker dooku c-3po owen. Leia jade alderaan jar dooku utapau tusken raider dantooine jawa. Anakin leia kessel jango bespin lando organa tatooine tusken raider. Mara ackbar mara calamari hutt qui-gonn dantooine.</p>
         <p>Yoda sidious lando padmé chewbacca fett. Maul calrissian boba lobot jade darth obi-wan. Wookiee darth ahsoka dagobah darth sidious naboo lars. Dooku skywalker skywalker ben luke windu. Wicket darth coruscant darth coruscant organa palpatine yoda padmé. Darth leia organa gonk lando mon mara hutt. Wookiee darth padmé windu hutt. Darth cade maul padmé grievous greedo moff dooku solo. Coruscant twi'lek dooku moff skywalker.</p>
      </div>
   </div>
</div>

<div class="container" style="background-color:#000;width:100%;">
   <div class="row">
      <div class="col-sm-10 col-sm-push-1 col-md-8 col-md-push-2">
         <h1>Full Screen Burger Menu</h1>
         <h3>Click the burger.</h3>
         <p>Lucas ipsum dolor sit amet darth lando qui-gonn mara droid jade qui-gonn skywalker wedge lars. Ben antilles chewbacca palpatine mothma fisto binks mara. Wicket greedo c-3p0 han lars mara darth. Darth binks wookiee mara luuke amidala. Lando kessel jango wicket. Moff jango dantooine luuke skywalker obi-wan. Darth mandalore binks leia solo moff yoda. Darth c-3p0 maul ben jar lando. Jabba ahsoka grievous mandalorians kenobi wookiee chewbacca. Binks calrissian tatooine baba jango k-3po darth calamari yavin.</p>
         <p>Wicket sidious organa skywalker mandalore mon qui-gonn fisto. Leia grievous biggs bespin calamari. Alderaan luuke darth hutt. Vader leia boba kashyyyk dagobah jade kashyyyk. Lars amidala gonk lobot organa. Twi'lek darth gamorrean obi-wan boba moff. Yavin c-3p0 darth darth luke chewbacca han. Skywalker dooku c-3po owen. Leia jade alderaan jar dooku utapau tusken raider dantooine jawa. Anakin leia kessel jango bespin lando organa tatooine tusken raider. Mara ackbar mara calamari hutt qui-gonn dantooine.</p>
         <p>Yoda sidious lando padmé chewbacca fett. Maul calrissian boba lobot jade darth obi-wan. Wookiee darth ahsoka dagobah darth sidious naboo lars. Dooku skywalker skywalker ben luke windu. Wicket darth coruscant darth coruscant organa palpatine yoda padmé. Darth leia organa gonk lando mon mara hutt. Wookiee darth padmé windu hutt. Darth cade maul padmé grievous greedo moff dooku solo. Coruscant twi'lek dooku moff skywalker.</p>
      </div>
   </div>
</div>

最佳答案

与其使用 JavaScript 来解决这个问题，不如使用 mix-blend-mode 找到基于 CSS 的解决方案成为一个更强大和灵活的选择。

mix-blend-mode属性允许您控制元素在其背景下的混合行为。在您的情况下，可以通过 "difference" blend mode 实现对比外观以确保汉堡酒吧在大多数情况下可见。

差异混合模式可以被认为是“颜色反转” - 当应用于您的汉堡菜单时，这将确保菜单在大多数背景下都可见。这种方法的另一个好处是它适用于大多数纯色、图像或渐变背景。

您可以通过添加以下 CSS 为您的菜单使用混合:

#menuToggle {
    mix-blend-mode: difference; /* Invert color of menu from background */
}

#menuToggle span {
    background:white; /* Ensure full blend contrast with background */
}

下面还有一个工作片段:

@import url(https://fonts.googleapis.com/css?family=Quicksand);
html,
body {
  height: 100%;
  background-color: red;
  font-family: 'Quicksand', sans-serif;
  color: white;
}

#menuToggle {
  display: block;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  
    mix-blend-mode: difference;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */
  -webkit-touch-callout: none;
}


/*
 * Just a quick hamburger
 */

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative; 
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
  
  background:white;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}


/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}


/*
 * But let's hide the middle one.
 */

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}


/*
 * Ohyeah and the last one should go the other direction
 */

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}


/*
 * Make this absolute positioned
 * at the top left of the screen
 */

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}


/*
 * And let's slide it in from the left
 */

#menuToggle input:checked~ul {
  transform: none;
}
<!--    Made by Erik Terwan    -->
<!--   24th of November 2015   -->
<!--        MIT License        -->
<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />

    <!--
    Some spans to act as a hamburger.
    
    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>

    <!--
    Too bad the menu has to be inside of the button
    but hey, it's pure CSS magic.
    -->
    <ul id="menu">
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
      <a href="#">
        <li>Info</li>
      </a>
      <a href="#">
        <li>Contact</li>
      </a>
      <a href="https://erikterwan.com/" target="_blank">
        <li>Show me more</li>
      </a>
    </ul>
  </div>
</nav>


<div class="container" #slide-1>
  <div class="row">
    <div class="col-sm-10 col-sm-push-1 col-md-8 col-md-push-2">
      <h1>Full Screen Burger Menu</h1>
      <h3>Click the burger.</h3>
      <p>Lucas ipsum dolor sit amet darth lando qui-gonn mara droid jade qui-gonn skywalker wedge lars. Ben antilles chewbacca palpatine mothma fisto binks mara. Wicket greedo c-3p0 han lars mara darth. Darth binks wookiee mara luuke amidala. Lando kessel
        jango wicket. Moff jango dantooine luuke skywalker obi-wan. Darth mandalore binks leia solo moff yoda. Darth c-3p0 maul ben jar lando. Jabba ahsoka grievous mandalorians kenobi wookiee chewbacca. Binks calrissian tatooine baba jango k-3po darth
        calamari yavin.</p>
      <p>
        Wicket sidious organa skywalker mandalore mon qui-gonn fisto. Leia grievous biggs bespin calamari. Alderaan luuke darth hutt. Vader leia boba kashyyyk dagobah jade kashyyyk. Lars amidala gonk lobot organa. Twi'lek darth gamorrean obi-wan boba moff. Yavin
        c-3p0 darth darth luke chewbacca han. Skywalker dooku c-3po owen. Leia jade alderaan jar dooku utapau tusken raider dantooine jawa. Anakin leia kessel jango bespin lando organa tatooine tusken raider. Mara ackbar mara calamari hutt qui-gonn dantooine.
      </p>
      <p>
        Yoda sidious lando padmé chewbacca fett. Maul calrissian boba lobot jade darth obi-wan. Wookiee darth ahsoka dagobah darth sidious naboo lars. Dooku skywalker skywalker ben luke windu. Wicket darth coruscant darth coruscant organa palpatine yoda padmé.
        Darth leia organa gonk lando mon mara hutt. Wookiee darth padmé windu hutt. Darth cade maul padmé grievous greedo moff dooku solo. Coruscant twi'lek dooku moff skywalker.
      </p>
    </div>
  </div>
</div>

<div class="container" style="background-color:#000;width:100%;">
  <div class="row">
    <div class="col-sm-10 col-sm-push-1 col-md-8 col-md-push-2">
      <h1>Full Screen Burger Menu</h1>
      <h3>Click the burger.</h3>
      <p>Lucas ipsum dolor sit amet darth lando qui-gonn mara droid jade qui-gonn skywalker wedge lars. Ben antilles chewbacca palpatine mothma fisto binks mara. Wicket greedo c-3p0 han lars mara darth. Darth binks wookiee mara luuke amidala. Lando kessel
        jango wicket. Moff jango dantooine luuke skywalker obi-wan. Darth mandalore binks leia solo moff yoda. Darth c-3p0 maul ben jar lando. Jabba ahsoka grievous mandalorians kenobi wookiee chewbacca. Binks calrissian tatooine baba jango k-3po darth
        calamari yavin.</p>
      <p>
        Wicket sidious organa skywalker mandalore mon qui-gonn fisto. Leia grievous biggs bespin calamari. Alderaan luuke darth hutt. Vader leia boba kashyyyk dagobah jade kashyyyk. Lars amidala gonk lobot organa. Twi'lek darth gamorrean obi-wan boba moff. Yavin
        c-3p0 darth darth luke chewbacca han. Skywalker dooku c-3po owen. Leia jade alderaan jar dooku utapau tusken raider dantooine jawa. Anakin leia kessel jango bespin lando organa tatooine tusken raider. Mara ackbar mara calamari hutt qui-gonn dantooine.
      </p>
      <p>
        Yoda sidious lando padmé chewbacca fett. Maul calrissian boba lobot jade darth obi-wan. Wookiee darth ahsoka dagobah darth sidious naboo lars. Dooku skywalker skywalker ben luke windu. Wicket darth coruscant darth coruscant organa palpatine yoda padmé.
        Darth leia organa gonk lando mon mara hutt. Wookiee darth padmé windu hutt. Darth cade maul padmé grievous greedo moff dooku solo. Coruscant twi'lek dooku moff skywalker.
      </p>
    </div>
  </div>
</div>

关于javascript - 根据背景颜色改变汉堡菜单的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57754357/

上一篇：javascript - 加载完所有元素(由ajax调用)后如何调用函数？

下一篇：html - CSS 定位 : Content that should be below the fold is appearing above the fold

相关文章：

javascript - 使用 onchange 输出生成的链接

html - 将没有固定宽度或高度的 div 中的内容居中

html - 更改高度和宽度的元素中的垂直居中文本

html - Paypal 按钮和文本之间的距离

css - 为什么我的内联样式有效，但我的样式表根本没有更改代码？

javascript - False True 通过 onclick jQuery 改变 attr

javascript - 使用 $0 来引用 Javascript 的 String.replace 中的整个匹配项

javascript - 如何在不卡住浏览器的情况下在 JavaScript 中使用计时器循环？

Javascript 数组多个

css - 我将联系人按钮更改为红色，但它没有显示在第一个按钮上。我错过了什么？

©2024 IT工具网  联系我们