[SOLUCIONADO] Navbar con opacidad

vancedyer · 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: text

<!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>

Bartz · Agosto 26, 2019, 02:15:46 PM

Hola @You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login !

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

Te dejo un enlace para que lo veas
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Saludos !

vancedyer · Agosto 26, 2019, 04:21:37 PM

Ya lo solucione muchas gracias

Enviado desde mi COR-L29 mediante Tapatalk

[SOLUCIONADO] Navbar con opacidad

vancedyer

Agosto 25, 2019, 04:29:10 AM Ultima modificación: Agosto 26, 2019, 08:29:35 PM por AXCESS

Bartz

Agosto 26, 2019, 02:15:46 PM #1

vancedyer

Agosto 26, 2019, 04:21:37 PM #2