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

Question

我有一个带

的导航栏

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

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

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

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

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

Answer 2

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

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