css使bootstrap导航栏透明

Question

我使用bootstrap并且我的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>

Answer 1

只需将此添加到您的CSS: -

.navbar-inner {
    background:transparent;
}

Answer 2

你们所做的事情是不必要的.

对于透明背景,只需:

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

没有类navbar-default或navbar-inverse.

Answer 3

通过向.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%);
}

我的标记是这样的

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

Answer 4

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

<nav class="navbar navbar-transparent">

这就是你所需要的一切.

Answer 5

所有这些混乱都没有必要.

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

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

  //

</nav>

Answer 6

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

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

Answer 7

更新2019

引导程序4

默认情况下，导航栏是透明的。请记住要使用链接颜色，navbar-light否则navbar-dark链接颜色会与背景颜色的对比度相反。

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>