正如您所看到的那样,导航栏位于背景图像的顶部。 这就是我所拥有的:
<!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>
给出:
我不知道如何把它放在图像本身而不是上面。
简短的问题:是什么让vimeo的照片看起来比我从太阳使用的图像好得多?在我的图像上你可以看到所有的像素等...这是因为它可能是一个太小的图像,它必须拉伸很多,以适应整个页面?
编辑:
这是我尝试但没有用的
<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>
答案 0 :(得分:3)
Bootstrap 4
Navbar没有背景颜色,因此默认情况下它是透明的。请记住使用navbar-light
或navbar-dark
,以便链接颜色与背景图像的对比度一起使用。显示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
使用navbar-fixed-top
然后更改CSS以使其透明。以下是自定义透明导航栏的示例。
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>
答案 1 :(得分:1)
您需要从导航栏中删除背景:
.navbar-default {
background: none;
}
<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>
&#13;
答案 2 :(得分:0)
.navbar{
background:transparent;
}
这将使您的背景透明。
答案 3 :(得分:0)
只需在Body中拍摄背景图像,然后使用此代码
<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>
也使用样式样式=&#34;不透明度:0.6;&#34;在Navbar div