Tengo un menú de navegación flotante con un `background` negro transparente, el color de fondo transparente se visualiza muy bien solo cuando esta en fondos o imágenes oscuras o medias oscuras o colores fuertes.

Pero en colores claros(Blanco, gris claros) en vez de visualizar un `background` negro transparente, se visualiza un color gris transparente.

>Ahora existe una forma de crear un `background` negro transparente, sin que afecte el color al estar en fondos claros.

He probado utilizando estas dos formas de `background` negro transparente.

     background: rgba(34,34,34,0.75);
     background-color: rgba(0,0,0,0.1);

pero su color cambia en fondos claros.

*Ejemplo de color de fondo transparente de como su color cambia en color de fondos claros*

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.div1{
  height: 80px;
  background: #fff;
  padding-top: 20px !important;
}

.div2{
  color:#fff;
  height: 40px;
  background: rgba(34,34,34,0.75);
}
.div3{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
}

.div4{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div5 {
  color:#fff;
  height: 40px;
  background: rgba(34,34,34,0.75);
}
.div6{
  height:80px;
  background-image: url(http://www.themeinthebox.com/demo/color/images/slider/bg1.jpg);
}

.div7{
  height:80px;
  background-image: url(http://www.tommasosignori.it/img/macbook-air-all-faded-and-stuff.jpg);
}

.div8{
  color:#fff;
  height: 40px;
  background-color: rgba(0,0,0,0.1);
}

ul li a {
  padding: 10px;
  color: #9d9d9d;
}

ul li {
  display: inline-block;
  list-style-type: none;
  text-align: left;
}

<!-- language: lang-html -->

<div class="div1">
 <div class="div2">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div1">
 <div class="div3">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div4">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div6">
 <div class="div5">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<div class="div7">
 <div class="div8">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 </ul>
 </div>
</div>

<!-- end snippet -->