Skip to main content
etiquetas editadas
Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85
Origen Enlace
Otto
  • 300
  • 5
  • 22
  • 55

¿Cómo crear background negro transparente sin perder la calidad del background transparente en fondos claros?

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>