Bootstrap - 在导航栏上设置封面图片

Question

我有一个带有固定顶部导航栏的 bootstrap 格式的页面。

我想要的是在导航上方设置全宽（固定高度）封面图像（可能响应...）。

我已经试过了this，但是封面就是不显示。

更新 1： 导航栏显示在页面底部（如页脚）...不明白为什么...

这是我的 HTML:

<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
           ...
           ...
           ...

导航栏CSS自定义和封面CSS:

body {
  min-height: 2000px;
  padding-top: 70px;
}

.navbar-brand,
.navbar-nav li a.main-bar{
    line-height: 70px;
    height: 70px;
    padding-top: 0;
}

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

.FlexEmbed:before {
  content: "";
  display: block;
  width: 100%;
}

.FlexEmbed--3by1:before {
  padding-bottom: 33.33333%;
}

在此先感谢 Whosebug 社区！

更新 2：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>MySite</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  </head>

  <body>

    <div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>

   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">
            <img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
          </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#" id="home" class="main-bar">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle main-bar" data-toggle="dropdown" aria-expanded="false" id="Mydropdown">Mydropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#" id="element1">element1</a></li>
                <li class="divider"></li>
                <li><a href="#" id="element2">element2</a></li>
                <li><a href="#" id="element3">element3</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="element4" class="main-bar" style="color: #18b07d;">element4</a></li>
            <li><a href="#" id="element5" class="main-bar">element5</a></li>
            <li><a href="#" id="element6" class="main-bar">element6</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container" id="content"></div> // here I paste all the content via jQuery

  </body>
</html>

这是我的问题fiddle。

Answer 1

希望我正确理解了你的问题。一种选择是 position 您的背景也 fixed。通过添加 width: 100%; 和 background-size: cover;，您将完全覆盖它。

更新：

要使其更像 "Facebook cover image"，请向图像添加 height 并删除 body 上的 padding-top: 70px;。那你应该设置好了。

.FlexEmbed {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
    background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

您还可以在 .navbar-fixed-top 中添加一些边距，以确保背景显示在顶部。

.navbar-fixed-top {
    top: 70px;
}

Check out my updated demo here.

Answer 2

使用 JsFiddle 创建现场演示。

导航栏位于底部，因为您将图像显示为块；

我不太确定您要实现的目标，但是您尝试过使用 z-index 吗？

Bootstrap - 在导航栏上设置封面图片

Bootstrap - Set cover image over navbar

css

cover

twitter-bootstrap