bootstrap - 顶部带有导航栏的完整背景图像答案

【问题标题】：bootstrap - full background image with nav bar over the topbootstrap - 顶部带有导航栏的完整背景图像
【发布时间】：2016-05-09 17:37:49
【问题描述】：

我正在尝试创建一个带有浮动在图像顶部的导航栏的完整背景图像页面。

我遇到了一个问题，导航栏将图像向下推，图像设置在 html 元素的背景上，所以我不知道为什么导航栏会产生这种效果。

我只是在引导程序入门页面上直接使用 css，没有导航栏，图像适合整个页面，导航栏位于图像上方并将其向下推：

CSS：

html{
            /* This image will be displayed fullscreen */
            background:url('bg.jpg') no-repeat center center;

            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;

            /* The Magic */
            background-size:cover;
        }

        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;           
        }

        .navbar {
            margin-top: 0px;
            margin-bottom: 0px;
        }

HTML：

    <body>
    <div class="container">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</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><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>

                </div><!-- /.navbar-collapse -->
            </div>
        </nav>
    </div>

我想要最终的效果是整个页面的图像，导航栏与显示在其下方的图像坐在一起，而不是将图像向下推，因此它在导航栏之后开始。

【问题讨论】：

标签： css twitter-bootstrap background-image navbar

【解决方案1】：

将以下 2 行 CSS 应用到主体 而不是 html 元素：

 body {
            background:url('bg.jpg') no-repeat center center;
            background-size:cover;  

            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;
        }

【讨论】：

您好，谢谢，这有效，为什么它在正文而不是 html 上有效？
这里有一篇关于差异的好文章。它应该为您提供详细的答案（比我在简短的评论中更好:-)）：css-tricks.com/html-vs-body-in-css
感谢您的帮助，也感谢您的网页！

【解决方案2】：

为body 标签提供背景。

html{

         height: 100%;
         width: 100%;

       }
        body {
            /* Workaround for some mobile browsers */
            min-height:100%;    
            padding-top: 20px;
            padding-bottom: 20px;
              /* This image will be displayed fullscreen */
            background:url('http://www.radioviva.fm.br/images/backgrounds/bg-squares-dark.jpg') no-repeat center center;

            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;

            /* The Magic */
            background-size:cover;
        }

        }

        .navbar {
            margin-top: 0px;
            margin-bottom: 0px;
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
        <nav class="navbar navbar-default navbar-custom" role="navigation">
            <div class="container-fluid">
              <!-- Brand and toggle get grouped for better mobile display -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>

              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</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><a href="#">Separated link</a></li>
                      <li><a href="#">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>

                </div><!-- /.navbar-collapse -->
            </div>
        </nav>
    </div>

【讨论】：

【解决方案3】：

将背景添加到正文 - 不是 html

body {
  /* Workaround for some mobile browsers */
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  padding-top: 20px;
  padding-bottom: 20px;
}

请看这里：http://codepen.io/anthu/full/KVeOyV/

【讨论】：