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

Question

I'm having trouble making the background of the following navbar transparent. I've tried making background-color: transparent;important. for.navbar but that doesn't seem to work either.

<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

remove the bg-light class from the nav element, or override it inline or id with important. But the cleanest way is to remove simply the class. I think you could simply not override it because bootsstrap sets the color with the bg-light class also with.important.

Answer 2

I don't believe you may have mentioned it but have you tried the the 'opacity' css. You can do:

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

Hopefully this helps for the navbar. Let me know if it doesn't, i'll try and help in any way possible.

Answer 3

You can add a new css class as background-color: transparent; or you can change property of ".bg-light" class.

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