我有一个带有固定顶部导航栏的 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%;
}
在此先感谢 stackoverflow 社区!
更新 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我的问题。
最佳答案
希望我正确理解了您的问题。一种选择是定位您的背景固定。通过添加 width: 100%; 和 background-size: cover; 你会得到它完全覆盖。
更新:
为了让它更像“Facebook 封面图片”，请向图片添加 height 并删除 上的 。然后你应该设置。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;
}
关于css - Bootstrap - 在导航栏上设置封面图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29893189/