bootstrap - comment mettre votre barre de navigation en haut de votre image d'arrière-plan?
Je suis nouveau sur le bootstrap.
C'est la conception que je suis en train de faire:
Comme vous pouvez le voir la barre de navigation est en haut de l'op de l'image d'arrière-plan.
C'est ce que j'ai:
<!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>
donne:
Je ne sais pas comment le mettre sur l'image elle-même au lieu de ci-dessus.
court sidequestion: comment se fait-il que l'image de vimeo rend tellement mieux que l'image que j'utilise le soleil? sur mon image, vous pouvez voir tous les pixels etc... Est-ce dû au fait qu'il pourrait être une trop petite image et qu'il a poussé beaucoup pour s'adapter à l'ensemble de la page?
EDIT:
c'est ce que j'ai essayé, mais n'a pas de travail
<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>
essayé de réglage de l'image d'arrière-plan du conteneur qui a tout le contenu sauf la barre de navigation?
Vous faire navbar arrière-plan transparent
Vous faire navbar arrière-plan transparent
OriginalL'auteur LandonZeKepitelOfGreytBritn | 2016-02-02
Vous devez vous connecter pour publier un commentaire.
Bootstrap 4
La barre de navigation n'a pas de couleur d'arrière-plan, de sorte qu'il est transparent par défaut. N'oubliez pas d'utiliser
navbar-light
ounavbar-dark
de sorte que le lien de couleurs travail avec le contraste de l'image d'arrière-plan. Affichage de la activation /désactivation d' est également basé sur la barre de navigation-(sombre ou clair).https://www.codeply.com/go/FTDyj4KZlQ
Bootstrap 3
Utilisation
navbar-fixed-top
et ensuite modifier le CSS pour le rendre transparent. Voici un exemple d'un transparent personnalisé barre de navigation.http://www.codeply.com/go/JNy8BtYSem
une idée sur le côté de la question?
OriginalL'auteur Zim
Il suffit de prendre le backgound image dans le Corps et ensuite utiliser ce code
Également utilisé style style="opacity:0.6;" dans la barre de navigation div
OriginalL'auteur Saad Mirza
La couleur de fond est définie sur l' .navbar-classe par défaut donc, assurez-vous que votre feuille de style css est à l'aide de cette classe à la cible tourner la barre transparente. par exemple,
Comme le Navet, cela doit être appliqué après le bootstrap styles dans votre
<head>
Si vous voulez vraiment de la force pendant que vous êtes à la faire fonctionner ajouter l'attribut suivant à votre
<nav>
élémentDe sorte que votre
nav
élément ressemble à ceci:Cependant, il est évidemment mieux d'en avoir dans un fichier CSS, plutôt que comme inline HTML
OriginalL'auteur elmarko
Cela rendra votre arrière-plan transparent.
OriginalL'auteur Atilla Arda Açıkgöz