【发布时间】：2015-09-18 11:44:59
【问题描述】：
到目前为止，我通过这样做以 NAV 栏为中心：
body {
width: 100%;
height: 100%;
font-family: 'Yantramanav', 'Open Sans', sans-serif;
color: #343434;
}
html {
width: 100%;
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Yantramanav', 'Open Sans', sans-serif;
color: #343434;
}
p {
font-family: 'Open Sans', sans-serif;
color: #343434;
}
hr {
max-width: 50px;
border-color: #4c8c8c;
border-width: 3px;
}
hr.light {
border-color: #fff;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-primary {
border: 1px solid #4c8c8c;
color: #4c8c8c;
background-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus {
border: 1px solid #4c8c8c;
outline: 0;
color: #fff;
background-color: #4c8c8c;
}
/* Preloader
==============================================================*/
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
/* Top Banner (Above Navbar where logo sits)
==============================================================*/
.banner {
padding-bottom: 50px;
}
.banner img {
display: block;
margin-left: auto;
margin-right: auto
}
/* Global Navbar Formatting
==============================================================*/
.navbar.transparent.navbar-default .navbar-inner {
border-width: 0px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
background-color: rgba(0,0,0,0.0);
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}
.navbar-default {
font-family: 'Yantramanav', 'Open Sans', sans-serif;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
background-color: #fff
}
.navbar-default .navbar-nav>li>a {
color: #999999
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #000
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #000
}
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
#topnavbar {
margin: 0;
}
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
} <section class="banner" id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="#">
</div>
</div>
</div>
</section>
<!-- Navigation
===================================================================================-->
<nav class="navbar transparent navbar-default navbar-static-top" role="navigation" id="MainNav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">The Company</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="training.html">Training & Courses</a></li>
<li><a href="stratagy.html">The Stratagy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</nav>我已经添加了横幅，以便我可以在后面添加徽标，现在我只需要在后面获取图像并让导航栏保持静态和透明，这就是我在这里的原因，有人可以告诉我如何实现这一点吗？
提前致谢，任何帮助表示赞赏 汤姆
【问题讨论】：
-
你可以使用
position absolute来制作图片
标签： javascript jquery html css twitter-bootstrap