1

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>

1 respuesta 1

0

Hazlo más opaco. El último digito controla la opacidad y tu tienes 0.1. Mientras mas bajo el número mas transparente el color y menos "influye" en el color de fondo. Creo que un 0.8 te puede servir.

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

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

.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(0,0,0,0.8);    }
.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.8);
}

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>

1
  • 1
    Perfecto @devconcept se visualiza muy bien en fondos claros, pero en fondos oscuros el menú de navegación se ve completamente negro, no todo es perfecto verdad :) Saludos.
    – Otto
    Commented el 30 sept. 2016 a las 21:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.