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