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

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;
}