带有其他颜色按钮的半透明导航栏答案

【问题标题】：Semi-transparent navbar with buttons in other color带有其他颜色按钮的半透明导航栏
【发布时间】：2014-11-12 02:11:44
【问题描述】：

我有一个带有

的导航栏

background-color:rgba(255, 255, 255, 0.7);

我想制作一个不同颜色的按钮，但仍然是半透明的。问题是它覆盖了导航栏背景颜色，我想覆盖它。我可以分别为按钮设置背景颜色。

但在这种情况下，我不知道如何将颜色设置为它们之间的空间。

http://www.bootply.com/5VQGFDHZfq

【问题讨论】：

如果我的回答对你有帮助，请选择它。谢谢

标签： html css twitter-bootstrap navbar

【解决方案1】：

演示：http://www.bootply.com/06nHRbI1p5

HTML（在链接内部添加em）：

<nav class="menu" role="navigation">
  <div class="container">

    <!-- Collect the nav links, forms, and other content for toggling -->
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dp-white"><em>Dropdown white <span class="caret"></span></em></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown red <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
          </ul>
        </li>
      </ul>
  </div><!-- /.container -->
</nav>

CSS：

.menu
{
  background-color:rgba(200, 20, 20, 0.7);
}

.menu a{
  color: #fff;
  background:transparent;
}

#dp-white {
  color: #000;
  position:relative;
  z-index:1;
}


#dp-white em {
  color: #000;
  position:relative;
  z-index:1;
  font-style:normal;
}

#dp-white:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:0;
  background-color:rgba(255, 255, 255, .5);
}

#dp-white:after {
  content:'';
  position:absolute;
  background-color: #026873;
   background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
  background-attachment:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:-1;
}




body {
background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}

【讨论】：

【解决方案2】：

我已经更改了您在“bootply”中提供的代码。我已经更改了菜单类的 css，如下所示。这是你的要求吗。如果没有，请告诉我。我会尽力而为。

  .menu a{
    color: rgba(255, 0, 0, 0.5);
    background-color:rgba(0, 0, 0, 0.5);
  }

【讨论】：

不，抱歉，这不是我想要的。我希望白色按钮是半透明的纯白色，而不是像您在我的示例中看到的那样与导航栏的半透明红色混合。
感谢您的澄清。我得到了你的要求。您想为一个按钮隐藏完整的红色半透明背景。而且那个按钮应该足够透明，不会与实际的红色混合。让我想想可能性。如果我有一个。我会发布它。