将透明（通过文本和导航栏）文本添加到导航栏

Question

我正在使用引导程序构建网站，并且我将导航栏固定在窗口的顶部。我试图通过字母和导航条使条形图左侧的缩写徽标（BLM）透明（以便通过字母可以看到页面上的任何内容）。

任何人都知道需要添加什么css（或html）才能执行此操作？

以下是我的导航栏代码：

<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">BLM</a>
    </div>
    <div class="navbar-collapse collapse">

      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
              <a href="#"class="dropdown-toggle" data-toggle="dropdown">The Team <span class="caret"></span></a></li>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">PersonA</a></li>
                    <li><a href="#">PersonB</a></li>
                    <li><a href="#">PersonC</a></li>
                    <li><a href="#">PersonD</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

我正在谈论透明到页面的部分是

<a class="navbar-brand" href="#">BLM</a>

我可以使用CSS来使导航栏品牌透明，但它只是黑色，因为导航栏是黑色的（我不希望导航栏透明）。

在这个例子中，我希望能够通过BLM字母看到红墙

感谢您的帮助/想法!!

Answer 1

不幸的是，在跨浏览器兼容的情况下，还没有CSS功能可以完成你想要的功能。但是，解决问题的方法很简单。

将徽标替换为带有透明字母和与导航栏其余部分匹配的半透明背景的.png 。在您的div周围移动，以便您的徽标和导航栏的其余部分是单独的元素，并且您已完成！

Answer 2

尝试opacity和小数值。

.navbar-brand {
    opacity: 0.5;
}