Bootstrap 3 - 中心导航和图像背后 [英] Bootstrap 3 - Centered Nav and image behind

问题描述

我想要达到类似这张图片的效果：

I'm trying to achieve something similar to this image:

到目前为止，我有以NAV栏为中心执行此操作：

So far I have Centred by NAV bar by doing this:

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>

可以添加标志背后，现在我只需要得到和图像背后，使导航栏静态和透明，这是为什么在这里，有人可以告诉我如何实现这一点？

I have added the banner so that I can add the logo behind, Now I Just need to get and image behind and make the nav bar static and transparent which is why im here, Could someone show me how to achieve this?

感谢提前，任何帮助赞赏
汤姆

Thanks in advance, any help appreciated Tom

推荐答案

你真的需要非常少的相同效果您提供的照片：

You really need very little the same effect as the photo you provided:

图片只需要的CSS就在下面，您可以删除它周围的容器/列/行。 Hope ih

The only needed CSS for the image is just below > and you can remove the container/column/row that surrounds it. Hope ih

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

/*********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%;
}

<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>

这篇关于Bootstrap 3 - 中心导航和图像背后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！