bootstrap - 如何将你的导航栏放在你的背景图片上？ [英] bootstrap - how to put your navbar on top of your background image?
问题描述
我是bootstrap的新手。
这是我正在设计的设计：
正如你所看到的navbar位于背景图像的顶部。
这就是我所拥有的：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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 =＃>主页< / a>< / li>
< li>< a href =＃>提出问题！< / a>< / li>
< li>< a href =＃>了解< / a>< / li>
< li>< a href =＃>联络人< / a>< / li>
< / ul>
< / div>
< / nav>
< / body>
< / html>
给出：
我不知道如何将它放在图片上，而不是上面。
短侧面问题：是什么让vimeo的照片看起来比我从太阳使用的图片好得多？在我的图片上，你可以看到所有的像素等等......这是由于它可能是一个太小的图像，它必须拉伸很多以适应整个页面？
编辑：
这是我试过的，但没有成功
< nav class =navbar navbar-default>
< div class =container>
< ul class =nav navbar-nav>
< li class =active>< a href =＃>主页< / a>< / li>
< li>< a href =＃>提出问题！< / a>< / li>
< li>< a href =learn.html>了解< / a>< / li>
< li>< a href =＃>联络人< / a>< / li>
< / ul>
< style>
.navbar {
background：transparent;
}
< / style>
< / div>
< / nav>
Bootstrap 4 p>
Navbar没有背景颜色，所以默认情况下它是透明的。请记住使用 navbar-light 或 navbar-dark ，这样链接颜色背景图像的对比度。显示 触发器也基于导航栏 - （黑暗或光明）。
https://www.codeply.com/go/FTDyj4KZlQ
< nav class =navbar navbar-expand-sm固定顶部navbar-light>
< div class =container>
< button class =navbar-toggler navbar-toggler-righttype =buttondata-toggle =collapsedata-target =＃navbar1>
< span class =navbar-toggler-icon>< / span>
< / button>
< a class =navbar-brandhref =＃>品牌< / a>
< div class =collapse navbar-collapseid =navbar1>
< ul class =navbar-nav>
< li class =nav-item active>
< a class =nav-linkhref =＃>连结< / a>
< / li>
< / ul>
< / div>
< / div>
< / nav>
引导程式3
使用 navbar-fixed-top ，然后更改CSS以使其透明。以下是自定义透明导航栏的示例。
http://www.codeply.com/go/JNy8BtYSem
< nav id =navclass =navbar navbar-fixed-topdata-spy =affix>
< div class =container>
< div class =navbar-header>
< a href =＃class =navbar-brand>品牌< / a>
< a class =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
< i class =fa fa-bars>< / i>
< / a>
< / div>
< div class =navbar-collapse collapse>
< ul class =nav navbar-nav>
< li>< a href =＃>连结< / a>< / li>
< li>< a href =＃>连结< / a>< / li>
< / ul>
< ul class =nav pull-right navbar-nav>
< li>
< a href =＃>连结< / a>
< / li>
< / ul>
< / div>
< / div>
< / nav>
I am new to bootstrap. This is the design I am trying to make:
As you can see the navbar is on top op the background image. This is what I have:
<!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>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<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>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
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
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
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>
这篇关于bootstrap - 如何将你的导航栏放在你的背景图片上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
