透明メニュー

Question

オンラインで調査しようとしましたが、何も見つかりませんでした。 私はそれがこのウェブサイト上のように私の背景画像の後ろに行くように私のメニューを変更しようとしています：https://www.paypal.com/ca/webapps/mpp/merchant

どのように私は私のメニューにそれを適用するために私のCSSを変更できますか？

.holder{ 
width:960px; 
margin:0 auto; 
overflow:hidden; 
position:relative; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 
#nav{ 
background:#fefefe; 
padding:15px; 
} 

#nav .clearfix.mobile{ 
display: none; 
} 

#nav .nav-toggle{ 
/* margin:10px; */ 
display:none; 
float:right; 
} 

#nav #nav-topmenu{ 
margin-top:5px; 
} 

#nav #nav-topmenu ul li{ 
list-style:none; 
display:inline-block; 
vertical-align:middle; 
background:url(../img/bg-nav.png) no-repeat 0 4px; 
padding: 0 19px; 
line-height: 17px; 
margin:0; 
} 
#nav #nav-topmenu ul li:first-child{background:none;} 
#nav #nav-topmenu ul li a{ 
font-size:14px; 
font-weight: normal; 
line-height:14px; 
} 

#nav #nav-topmenu-mobile ul li{ 
list-style:none; 
padding:10px 20px; 
margin:0; 
border-bottom: 1px solid #ccc; 
} 
#nav #nav-topmenu-mobile ul li:first-child{background:none;} 
#nav #nav-topmenu-mobile ul li a{ 
font-size:50px; 
font-weight: normal; 
line-height:50px; 
/* color:#fff; */ 
} 

#nav #nav-topmenu-mobile ul li select{ 
-webkit-appearance: menulist-button; 
height: 50px; 
width: 210px; 
font-size: 30px; 
} 

#nav .popover{ 
min-width: 300px; 
left:75% !important; 
top:55px !important; 
} 

#nav .popover .arrow{ 
left:260px !important; 
} 

<div class="hidden-xs" id="nav-topmenu"> 
      <select name='langs' class="lang-selector -form-control pull-right"> 
       <option value="1" <?php if(LANG_ID == 1) echo "selected='selected'" ?> data-lang="en"> 
        English 
       </option> 

       <option value="2" <?php if(LANG_ID == 2) echo "selected='selected'" ?> data-lang="fr"> 
        Français 
       </option> 

       <option value="3" <?php if(LANG_ID == 3) echo "selected='selected'" ?> data-lang="es"> 
        Espa&ntilde;ol 
       </option> 
      </select> 
      <ul> 
       <?php 
       if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->is()): 
       ?> 
        <li> 
         <a href="<?php echo $this->url(array(), "job")?>"><?php echo __("flexible")?></a> 
        </li> 
       <?php 
       endif; 
       ?> 
       <?php 
       if(!Members_Factory::getRowByAuth() || Members_Factory::getRowByAuth()->isCompany()):?> 
        <li> 
         <a href="<?php echo $this->url(array(), "find")?>"><?php echo __("Find")?></a> 
        </li> 
       <?php 
       endif; 
       ?> 
       <li> 
        <!-- <a href="https://www.example.com/blog/"><?php echo __("Blog")?></a> --> 
        <a href="<?php echo $this->url(array("section" => "companies"), "how-it-works")?>" title="<?php echo __("How it works")?>"><?php echo __("How it works")?></a> 
       </li> 
       <li> 
        <a href="<?php echo $this->url(array(), "pricing")?>" title="<?php echo __("Pricing")?>"><?php echo __("Pricing")?></a> 
       </li> 
      </ul> 
     </div> 

Answer 1

スタイルシートの中には、さまざまなメニューのクラスまたはIDを作成する必要があります。

したがって、メニュー自体が保持しているボックスは、クラスまたはIDにopacity属性を設定します。

実際のメニュー項目にIDを使用し、不透明度を属性の最後の!importantコールで上書きすることができます。