Question

我无法使以下导航栏的背景透明。我尝试过使background-color为透明色！ .navbar，但这似乎也不起作用。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown" aria-controls="navbarnavdropdown" aria-expanded="false" aria-label="toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarnavdropdown">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html"><img src="assets/img/resultheap-logo.png" alt="" /></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="blog/index.html">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="faq.html">FAQ</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact-form/index.html">Contact</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardropdownmenulink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbardropdownmenulink">
                    <a class="dropdown-item" href="#">action</a>
                    <a class="dropdown-item" href="#">another action</a>
                    <a class="dropdown-item" href="#">something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

Answer 1

从nav元素中删除bg-light类，或用重要的内联或id覆盖它。但是最干净的方法是只删除类。我认为您不能简单地覆盖它，因为引导程序会同时使用bg-light类和！important来设置颜色。

Answer 2

我不相信您可能提到过它，但是您是否尝试过“不透明” css。您可以这样做：

opacity: 0; //Makes fully transparent
opacity: 0.5; //Half transparent
opacity 1; //No transparency

希望这对导航栏有所帮助。让我知道是否可以，我会尽一切可能帮助您。

Answer 3

您可以添加一个新的CSS类作为background-color：transparent;或者您可以更改“ .bg-light”类的属性。

.bg-light {background-color:Transparent!important}

如何使引导导航栏的背景透明？

3 个答案: