Полупрозрачный Navbar с кнопками в другом цвете

Question

У меня есть Navbar с

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'. Я изменил CSS для класса меню, как показано ниже. Это ваше требование. Если нет, пожалуйста, дайте мне знать. Я сделаю все возможное.

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