从导航栏中移除黑色背景

3
如何从导航栏中移除黑色背景颜色.... 我使用Firebug进行了注释,但无法实现.... 下面是我的代码....

http://jsfiddle.net/qvEnQ/1/embedded/result/

<div class="navbar navbar-inverse navbar-fixed-top" style="margin-top: 15px;">
        <div class="navbar-inner">
            <div class="container" id="expandingNavbar">
                <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse" target="_self">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/" style="padding-top: 0px; margin-left: 0px;" target="_self">
                    <img alt="change" class="defieLogo" src="/images/defie_logo_only.png">
                </a>

                <div id="welcomeName">Welcome soojin!</div>
                <div id="emailAccount">test10@defie.co<span style="color: #0074bd; position: relative;left: 67px;bottom: 33px;">[Log out]</span></div>

                <div class="nav-collapse collapse" style="height: 0px;">
                    <ul class="nav">
                        <li style="padding-left: 107px;">
                            <a style="font-weight: bold;" href="/product.html" <?="$strClass_1" ?="" target="_self">&gt;
                            MENU
                            </a>
                        </li>

                        <li>
                            <a style="color: #9b365a;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;
                                <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Vendors</a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Add New Vendor</a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Vendor List </a>
                        </li>
                        <li>
                            <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 0px;" href="/solution.html" <?="$strClass_2" ?="" target="_self">&gt;Reports</a>
                        </li>

                        <li><a style="color: #9b365a;" href="/service.html" <?="$strClass_3" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Purchase Transactions</a></li>
                        <li class="iphonePartnerLink"><a style="color: #9b365a;" href="/partner.html" <?="$strClass_4" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">Product Life cycle</a></li>
                        <li><a style="color: #9b365a;" href="/contact.html" <?="$strClass_5" ?="" target="_self">&gt;
                            <img alt="squareList" style="margin-right: 10px;" src="http://intra.defie.co/images/cube_vendor.png">RMA Transactions</a></li>  
                    </ul>
                    <a href="#myModal" role="button" data-toggle="modal" target="_self">
                        <span style="color: black; font-weight: bold; font-size: 20px; position: relative; margin-left: 488px; ">Soojin</span> <span style="color: #0074bd;">[Log out]</span>

                    </a>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>
2个回答

3

通过在类“.navbar-inner”中添加“background: transparent;”(或任何其他颜色),可以删除背景。

您的jsfiddle中css的第7972行。

如下所示:

.navbar-inverse .navbar-inner {
    background: transparent;
}

去掉背景图片,背景重复和滤镜。

希望这能帮到您!


0
从navbar div中删除.navbar-inverse类。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接