0

Hola estoy haciendo un navegador con css y por mucho que lo intento no logro hacer que la barra se vea medianamente transparente y el texto de esta se lea bien.

Sé que existe el opacity pero si lo pongo me lo muestra todo incluyendo el texto. Y si en el class del texto le pongo opacity:none no funciona, también he encontrado algo con alpha() pero no me va tampoco(el background color me daría igual). He probado mil cosas y buscado por Internet y no soluciono mi problema.Sé que es una pregunta muy concreta pero ya no sé a quien acudir.

Gracias de antemano.

#nav{
    
    position:fixed;
   float:left;
   width:100%;
   margin:0%;
   padding: 0%;
   text-align: center;
   margin-top:0px;
}

#nav li{

   float:left;
   display: inline;
   width:25%;
   list-style: none;
   position:relative; 
    
}

#nav li a{
   color:#666;
   text-decoration:none;
   display:inline;
   font-size:30pt;
    font-family: 'Nanum Pen Script', cursive;
}

#nav li a:hover{
   border:1px black solid;
   color:black;
   border-radius: 12px;
  background-color: skyblue;
    opacity: 0.6;
}

#nav li.parent:hover{
   margin:0px;
}
#nav li ul {
    background-color: white;
	float: none;
   width: 100%;
   margin:0%;
   padding: 0%;
   display:none;
   border:1px black solid;
   position: absolute;
   left: -1px;
   top:100%;
    border-radius: 12px;
   
}
#nav li:hover ul {
   display: block;
   	float: none;
}
#nav li li{
   display:block;
   	float: none;
   	   width: 100%;
   margin:0%;
   padding: 0%;
}

#nav li li a{
   display:block;
   	float: none;
}
<ul id="nav">
        <li class="parent"><a href="inicio.html">Inici</a></li>
         <li class="parent"><a href="coneixens.html">Coneixen's</a></li>
         <li class="parent"><a href="#">Varietats que oferim</a>
            <ul>
             <li><a href="fruites.html">Fruites</a></li>
             <li><a>Verdures</a></li>    
             <li><a>Llegums</a></li>   
             <li><a>Altres</a></li>    
            </ul>
         </li>  
         <li class="parent"><a href="contacta.html">Contacta'ns</a></li>
      </ul>

1
  • tienes una opcion con esta forma { } que habiendo seleccionado el codigo si pulsas le da formato Commented el 1 abr. 2019 a las 13:59

2 respuestas 2

4

Para el efecto que buscas, bajar la opacidad del fondo manteniendo el contenido a opacidad 1, podrías hacerlo con el alpha que mencionas de la siguiente manera:

background: rgba(250, 250, 250, 0.5)

Donde los tres primeros números son el código rgb del color que quieras y el último es el mencionado alpha, un valor entre 0 y 1 que define la opacidad, en este caso, de dicho color de fondo.

De esta manera el texto, imágenes, contenido en general del elemento se mantendrá completamente visible mientras que el fondo podrá variar en opacidad.

2
  • Muchas gracias! es lo que buscaba pero yo lo había visto en otro formato.
    – winnie
    Commented el 1 abr. 2019 a las 14:11
  • @winnie Si esta respuesta ha sido la acertada, puedes marcarla como correcta para ayudar a otros con futuros problemas como el tuyo, aparte, recibirás reputación por marcar una solución Commented el 1 abr. 2019 a las 14:39
2

Puedes hacerlo utilizando el hexadecimal y añadiendo al final el porcentaje, un ejemplo seria:

#a1{
  background-color: #ff000061
}
<div id="a1">Color de fondo rojo claro</div>

Los seis primeros elementos despues del # serian el color y los dos siguientes el porcentaje de opacidad

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.