Bootstrap 3 - 中心导航和后面的图像

时间：2015-09-17 10:48:40

标签： javascript jquery html css twitter-bootstrap

我正在尝试实现与此图像类似的功能： enter image description here

到目前为止，我通过NAV栏进行了中心操作：

/home/user/driver.jar
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%;
}

我已经添加了横幅，以便我可以添加徽标，现在我只需要在背后拍摄并使导航栏保持静态和透明，这就是为什么我在这里，有人能告诉我如何实现这个目标吗？ / p>

提前致谢，任何帮助表示赞赏 汤姆

3 个答案:

答案 0 :(得分：1)

你真的需要与你提供的照片相同的效果：

图片唯一需要的CSS就在＆gt;下面。你可以删除它周围的容器/列/行。希望我

.banner {
    padding-bottom: 10px;
    text-align: center;
}
.banner img {
    height: 100px;
}

＆＃13;
＆＃13; 
/*********ADJUSTED BODY RULES*********/

body {
  width: 100%;
  height: 100%;
  font-family: 'Yantramanav', 'Open Sans', sans-serif;
  color: #343434;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 1) 100%), url('https://upload.wikimedia.org/wikipedia/commons/1/1a/Sydney_bridge.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
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) 
==============================================================*/

/*********ADJUSTED RULES*********/

.banner {
  padding-bottom: 10px;
  text-align: center;
}
.banner img {
  height: 100px;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  border: none;
  background: none;
}
/* Global Navbar Formatting
==============================================================*/

.navbar.transparent.navbar-default {
  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: #000;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #999;
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: #999;
}
@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%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section class="banner" id="banner">
  <img src="http://scottace.com/img/css3-icon.png">
</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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将图像的z-index属性设置为负值，以便居中的导航将出现。

答案 2 :(得分：0)

请勿使用图片代码，因为背景不是内容相关的，请尝试使用background-image。您只需将其添加到横幅并将其放在右下角即可。

background: #ccc url("your/image/path.png") no-repeat scroll right bottom;
相关问题
最新问题