Soy nuevo en bootstrap.
Este es el diseño que estoy intentando hacer:
bootstrap - cómo poner tu barra de navegación en la parte superior de la imagen de fondo?

Como se puede ver la barra de navegación, es en la parte superior de la imagen de fondo.
Esto es lo que tengo:

 <!DOCTYPE html>
    <html lang="en">
    <head>
               <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>
        <style>
.navbar-default {
background: none;
border: none;
}

body{
    height:100%;
}
        html{
            background: url('sun.jpg') no-repeat center center fixed;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
            background-position: 0 0;

        }
        </style>

    </head>
<body>

        <nav class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav"> 
                    <li class="active"><a href="#">home</a></li>
                    <li><a href="#">ask a question!</a></li>
                    <li><a href="#">learn</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </div>

        </nav>

</body>
</html>

da:

bootstrap - cómo poner tu barra de navegación en la parte superior de la imagen de fondo?

No sé cómo ponerlo en la imagen de sí mismo, en lugar de arriba.

corto sidequestion: ¿qué hace que la imagen de vimeo hace que se vea mucho mejor que la imagen que yo uso desde el sol? en mi imagen se puede ver todos los píxeles etc… ¿esto Es debido al hecho de que podría ser demasiado pequeña de la imagen y que se ha estirado mucho para llenar toda la página?

EDICIÓN:

esto es lo que he intentado pero no funciona

    <nav class="navbar navbar-default">
        <div class="container">
            <ul class="nav navbar-nav"> 
                <li class="active"><a href="#">home</a></li>
                <li><a href="#">ask a question!</a></li>
                <li><a href="learn.html">learn</a></li>
                <li><a href="#">contact</a></li>
            </ul>
            <style>
            .navbar{
                background:transparent;
            }
            </style>
        </div>

    </nav>
  • trató de ajuste de imagen de fondo del recipiente que contiene todo el contenido excepto navbar?
  • Hacer que te navbar transparente de fondo

5 Comentarios

  1. 3

    Bootstrap 4

    La Navbar no tiene color de fondo, por lo que es transparente por defecto. Sólo recuerde que el uso navbar-light o navbar-dark por lo que el los colores de los enlaces trabajar con el contraste de la imagen de fondo. Visualización de la toggler también se basa en la barra de exploración-(oscuro o claro).

    https://www.codeply.com/go/FTDyj4KZlQ

    <nav class="navbar navbar-expand-sm fixed-top navbar-light">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    Bootstrap 3

    Uso navbar-fixed-top y, a continuación, cambiar el CSS para que sea transparente. He aquí un ejemplo de una costumbre navbar transparente.
    http://www.codeply.com/go/JNy8BtYSem

      <nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
        <div class="container">
            <div class="navbar-header">
          <a href="#" class="navbar-brand">Brand</a>
          <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <i class="fa fa-bars"></i>
          </a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
            <ul class="nav pull-right navbar-nav">
              <li>
               <a href="#">Link</a>
              </li>
            </ul>
          </div>        
        </div>
      </nav>
    • cualquier idea sobre el lado de la pregunta?
  2. 1

    Que usted necesita para eliminar el fondo de su nav-bar:

    .navbar-default {
        background: none;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
    html,
    body {
    height: 100%;
    background: red;
    }
    .navbar-default {
    background: none;
    border: none;
    }
    </style>
    <!-- Wrap all page content here -->
    <div id="wrap">
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Nav header</li>
    <li><a href="#">Separated link</a></li>
    <li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
    </div>
    </div>

    • He intentado la solución, como bien, pero no funcionó. He editado mi pregunta(he intentado no iso transparente así), no me malinterprete nada? Ps: cualquier idea sobre el lado de la pregunta?
    • Donde en el código hay que cargar el bootstrap.css? Los estilos personalizados necesidad de venir a la después de cargar el bootstrap
    • He editado mi post. Es esto correcto?
  3. 0

    Acaba de tomar el fondo de la imagen en el Cuerpo y, a continuación, utilizar este código

                 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-         
    toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Username</a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="wide">
    <div class="col-xs-5 line"><hr></div>
    <div class="col-xs-2 logo">Logo</div>
    <div class="col-xs-5 line"><hr></div>
    </div>
    <div class="container">
    <div class="text-center">
    <h1>Content</h1>
    </div>
    </div>

    También se utiliza el estilo style=»opacity:0.6;» en la barra de navegación div

  4. 0

    El color de fondo se establece en el .navbar-defecto de la clase para asegurarse de que su css es el uso de esa clase de destino de giro de la barra transparente. por ejemplo,

    .navbar-default{background-color: transparent;}

    Como el Nabo de los estados, esta debe ser aplicada después de los estilos de bootstrap en su <head>

    Si realmente quieres a la fuerza, mientras que usted está consiguiendo que funcione agregar el siguiente atributo a su <nav> elemento

    style="background-color: transparent;"

    Por lo que su nav elemento se parece a esto:

     <nav class="navbar navbar-default" style="background-color: transparent;">

    Sin embargo, es obviamente mejor tener esto dentro de un archivo CSS, en lugar de como inline HTML

Dejar respuesta

Please enter your comment!
Please enter your name here