Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[SOLUCIONADO] Navbar con opacidad

  • 2 Respuestas
  • 191 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado vancedyer

  • *
  • Underc0der
  • Mensajes: 4
  • Actividad:
    6.67%
  • Reputación 0
    • Ver Perfil
    • Email
  • Skype: vancedyer
« en: Agosto 25, 2019, 04:29:10 am »
Hola buenas estoy haciendo mi primera web con bootstrap y quiero hacer un navbar con un poco de opacidad y sin que afecte al texto.

Le pongo opacidad a la clase .bg-dark y lo que hace es ponerlo todo en opacidad:

[como se aprecia en la imagen tambien me pone en opacidad el texto y el buscado y yo quiero que eso no se ponga, solo el fondo del navbar.]


(el codigo css es el de bootstrap.css)

codigo html: 

   
Código: [Seleccionar]
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="css/bootstrap.css">
      <style>
            .navbarnav
            {
                border-bottom:5px solid #FF8C00;
             
            }
            body {
     background-image: url("https://i.imgur.com/WVcAdaK.jpg");
     background-color: #cccccc;
    }
          </style>
    </head>
    <body>
     
     <nav class="navbar navbar-expand-lg navbar-dark  bg-dark navbarnav ">
      <a class="navbar-brand" href="#">Steamlab</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
   
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
         
           
         
         
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
      <!-- Collapsible content -->
   
    </nav>
    <!--/.Navbar-->
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </html>
« Última modificación: Agosto 26, 2019, 08:29:35 pm por AXCESS »

Conectado Bartz

  • *
  • Moderador
  • Mensajes: 163
  • Actividad:
    53.33%
  • Reputación 8
  • ~Afaik~
    • Ver Perfil
« Respuesta #1 en: Agosto 26, 2019, 02:15:46 pm »
Hola @vancedyer !

Si quieres que solo el fondo sea transparente has probado utilizando RGBA en vez de #FFFF ?

Te dejo un enlace para que lo veas
https://css-tricks.com/rgba-browser-support/

Saludos !


Con la fuerza del mar, con la paz del rio


Desconectado vancedyer

  • *
  • Underc0der
  • Mensajes: 4
  • Actividad:
    6.67%
  • Reputación 0
    • Ver Perfil
    • Email
  • Skype: vancedyer
« Respuesta #2 en: Agosto 26, 2019, 04:21:37 pm »
Ya lo solucione muchas gracias

Enviado desde mi COR-L29 mediante Tapatalk


 

¿Te gustó el post? COMPARTILO!



[SOLUCIONADO] ¿Kali Linux o Kali Linux Ligth ?

Iniciado por worq

Respuestas: 2
Vistas: 22014
Último mensaje Noviembre 21, 2017, 12:28:54 pm
por Codig0Bit
[SOLUCIONADO] ¿Como publicar un software como software libre?

Iniciado por FuriosoJack

Respuestas: 2
Vistas: 8226
Último mensaje Mayo 23, 2017, 07:24:22 am
por HATI
[SOLUCIONADO] Multiuploader de imagenes con mysql, hosting de imagenes con mysql

Iniciado por graphixx

Respuestas: 4
Vistas: 9606
Último mensaje Marzo 26, 2013, 05:42:58 pm
por Xt3mP
[SOLUCIONADO] Linux Mint, errores, errores y mas errores...

Iniciado por n1sendev

Respuestas: 12
Vistas: 12689
Último mensaje Noviembre 22, 2017, 06:50:55 am
por RuidosoBSD
[SOLUCIONADO] Ayuda urgente con Virus "Virus.Win32Sality"

Iniciado por Napsters

Respuestas: 6
Vistas: 10789
Último mensaje Junio 11, 2012, 03:38:18 am
por Satyricon