css - js背景透明度 - table透明




CSS使自舉導航欄透明 (8)

測試background-image: none 。 該屬性將刪除linear-gradient

你可以在這裡看到結果: http : //jsfiddle.net/eugip9/8D36M/

我使用引導,我有我的HTML文件中的導航欄我想使這個導航欄透明,以顯示背景圖像。 有人可以教我如何做到這一點與CSS? 我試著下面的CSS什麼都沒有發生

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

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>

只需將其添加到您的CSS: -

.navbar-inner {
    background:transparent;
}

你們在做什麼是不必要的。

對於透明的背景,只要做到:

<div class="navbar">
// your navbar content
</div>

沒有class navbar-default或navbar-inverse。


如果您正在使用最新版本的Bootstrap和Ruby on Rails,則可以在html.erb文件中鍵入它,如下所示:

<nav class="navbar navbar-transparent">

這就是你所需要的。


只要離開內置的引導程序的默認導航欄工作正常。
你只需要添加下面的自定義CSS,這樣一切仍然工作,因為它應該。

HTML:

<nav class="navbar navbar-default">

CSS:

.navbar-default {
    background-color: transparent;
}

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->

沒有必要把這一切搞亂。

您可以通過不編寫navbar-defaultnavbar-inverse來使navbar透明

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>

試試這個在你的代碼,它為我工作 -

給元素,給你一個id,你想透明

例如根據你的代碼 -

<div class="navbar-inner" id="nav1">

然後在你的css-

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}




twitter-bootstrap