css 使引导程序导航栏透明

css to make bootstrap navbar transparent

提问by pythoniku

I use bootstrap and I have a navbar in my html file I would like to make this nav bar transparent to show the background image. Can some one teach me how to do this with css? I tried the following css nothing happend

我使用引导程序，并且我的 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>

采纳答案by scottM

I was able to make the navigation bar transparent by adding a new .transparent class to the .navbar and setting the CSS like this:

通过向 .navbar 添加一个新的 .transparent 类并像这样设置 CSS，我能够使导航栏透明：

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

My markup is like this

我的标记是这样的

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....

回答by Aksh?y Paghdar

Simply add this to your css :-

只需将此添加到您的 css 中：-

.navbar-inner {
    background:transparent;
}

回答by Jochem Stoel

What you people are doing is unnecessary.

你们这些人正在做的事情是不必要的。

For transparent background, simply do:

对于透明背景，只需执行以下操作：

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

without class navbar-default or navbar-inverse.

没有类 navbar-default 或 navbar-inverse。

回答by Kelly M Curtis

If you are using the latest version of Bootstrap and Ruby on Rails, you can just type it in the html.erb file as so:

如果您使用的是最新版本的 Bootstrap 和 Ruby on Rails，您只需在 html.erb 文件中输入它，如下所示：

<nav class="navbar navbar-transparent">

And that is all you need.

这就是你所需要的。

回答by Zim

Update 2019

2019 年更新

Bootstrap 4 - The Navbar is transparent by default

Bootstrap 4 - 默认情况下导航栏是透明的

Most of the answers here are misleading because they relate to Bootstrap 3. By default, the Bootstrap 4 Navbar is transparent. Just remember to use navbar-lightor navbar-darkso the link colors work against the contrast of the background color...

这里的大多数答案都具有误导性，因为它们与 Bootstrap 3 相关。默认情况下，Bootstrap 4 Navbar 是透明的。只要记住使用navbar-light或navbar-dark因此对背景颜色的对比度链接的颜色工作...

https://www.codeply.com/go/FTDyj4KZlQ

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

回答by Siva Prakash

There is no need for all this mess.

没有必要搞得一团糟。

You can make the navbar transparent by not writing navbar-defaultor navbar-inverse

您可以通过不写navbar-default或 不写来使导航栏透明navbar-inverse

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

  //

</nav>

回答by Amanda Treutler

Add the bg-transparent class to the navbar.

将 bg-transparent 类添加到导航栏。

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>

回答by Richard King

CSS code:

CSS代码：

.header .navbar-default {
  background: none;
}

HTML code:

HTML代码：

<header>
    <nav class="navbar navbar-default"></nav>
</header>

回答by wla312

in bootstrap 3.3.7 (and 4.0 presumably), this works:

在引导程序 3.3.7（大概是 4.0）中，这有效：

instead of:

代替：

<nav class="navbar navbar-inverse navbar-fixed-top">

use:

用：

<nav class="navbar bg-transparent navbar-fixed-top">

no CSS required!

不需要CSS！

回答by Devashish Prasad

Try this in your code, it worked for me -

在你的代码中试试这个，它对我有用 -

give an id to the element, to which you want to make transparent

给要使其透明的元素一个 id

for eg according to your code -

例如根据您的代码 -

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

Then apply this in your css-

然后将其应用于您的 css-

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