Adding transparent (through text and navbar) text to navbar - html

Question

I'm working on building a website with bootstrap, and I have a navbar fixed to the top of the window. I'm trying to make the abbreviated logo (BLM) on the left of the bar transparent through the letters and the navbar (so that whatever is on the page can be seen through the letters).
Anyone know what css (or html) needs to be added to do this?
Below is my navbar code:
<!-- 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">Home</li>
<li>About</li>
<li class="dropdown">
The Team <span class="caret"></span></li>
<ul class="dropdown-menu" role="menu">
<li>PersonA</li>
<li>PersonB</li>
<li>PersonC</li>
<li>PersonD</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The part I'm talking about making transparent through to the page is
<a class="navbar-brand" href="#">BLM</a>
I can use CSS to make the navbar-brand transparent, but then it's just black because the navbar is black (and I don't want the navbar to be transparent).
In this example, I want to be able to see the red wall through the BLM letters
Thanks for any help/thoughts!!

Answer 1

Unfortunately, there is no CSS feature (yet) that does what you want it to do while being cross-browser compatible. However, the solution to your problem is easy.
Replace your logo with a .png with transparent letters and a semi-transparent background that matches the rest of the navbar. Shuffle around your divs so that your logo and the rest of the navbar are separate elements, and you're done!

Answer 2

Try opacity and a value of a decimal.
.navbar-brand {
opacity: 0.5;
}