透明菜单

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设置!important属性。

然后您可以使用ID作为实际菜单项，并使用属性末尾的WEBPACK_FLAGS=--env.prod调用覆盖其不透明度。