css让bootstrap navbar透明

我使用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>

解决方法

通过向.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);
    background-image: -webkit-gradient(linear,50.00% 0.00%,50.00% 100.00%,color-stop( 0%,rgba(0,0.00)),color-stop( 100%,0.00)));
    background-image: -webkit-linear-gradient(270deg,0.00) 0%,0.00) 100%);
    background-image: linear-gradient(180deg,0.00) 100%);
}

我的标记是这样的

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

原文地址：https://www.jb51.cc/css/218144.html