如何使导航栏透明？

Question

这是使用Bootstrap框架的导航栏HTML代码。 我想让它稍微透明一点。 如何使用CSS实现？我尝试过了，但没有任何效果。

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand"></a>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav" style="margin-left:10%">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">HEALTH MANAGEMENT</a></li>
            <li><a href="#">PRE-POST PRAGNANCY</a></li>
            <li><a href="#">WEIGHT LOSS</a></li>
            <li><a href="#">CONTACT US</a></li>

        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"></a></li>
        </ul>
    </div>
</nav>

- Nishant

---

请发布您的导航栏CSS。 - Xahed Kamal

可能是重复的问题：如何使用CSS使Bootstrap导航栏透明？ - Insane Skull

你是否在使用CSS预处理器？如果你正在使用Less/Sass，只需替换变量@navbar-default-bg即可。例如：@navbar-default-bg: rgba(255, 255, 255, 0.5)。 - ppollono

Answer 1

将此添加到您的CSS中。

.navbar-header {
    background:transparent;
}

- Rahul Tripathi

Answer 2

只需使用rgba颜色。

E.g.:

background-color: rgba(0, 0, 0, 0.5)

- user4242771

Answer 3

你没有发布CSS。不过，如果你想改变导航栏的背景颜色，你需要使用RGBA颜色。所以，你可以通过以下方式使你的导航栏略微透明，带有白色背景 -

.navbar-default{
    background-color: rgba(255, 255, 255, 0.7);
}

- Xahed Kamal

Answer 4

给你的 nav 添加一个 ID，这样在 CSS 中选择它会更方便。

然后只需使用

.

#yourNavsID { opacity:0.7; }

显然，您可以将0.7更改为适合您需要的任何数字。

示例fiddle：http://jsfiddle.net/fr2wayy7/

- Jay