javascript - 如何制作一个完整的页眉？

Question

我正在尝试复制制作标题，如 this ，但我不太确定我会怎么做。我开始让图像填满整个屏幕，但我无法让它看起来像我提供的示例一样好。

我见过这种标题 multiple times .我想知道是否有某种库可以更轻松地制作这样的 header ？

Another example

我现在的代码(HTML 和 css，显然我没有像这样放在实际文件中):

<div class="cover">
<div class="filler">Text inside header</div>
</div>

.cover{
  background: url("../img/day1cover.jpg"); 
  background-size: cover;
  background-repeat:no-repeat;
  box-shadow: inset 0px -120px 100px -10px rgba(0,0,0,0.7);
  position: relative;
  color: rgb(255,255,255);  
}

.filler{
  width:100%;
  height: 100%;
  text-align: center;
  margin: 0;
}

Answer 1

这个简单的 fiddle 应该让你走上正确的道路:

FIDDLE

解释:

要使“页眉”使用整个页面，您需要将其设置为浏览器窗口宽度和高度的 100%。为此，您可以使用:

 html, body, .cover {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

然后为了使图像在不裁剪或丢失宽高比的情况下使用整个可用空间，您可以像这样使用 background CSS 属性:

.cover { 
  background: url(your_image.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

---

编辑

FIDDLE 在标题底部覆盖标题和标题文本。

---

完整代码
HTML :

<div class="cover">
    <div class="filler">Text inside header</div>
    <div class="overlay"></div>
</div>
<div id="content">
    ... SITE CONTENT ...
</div>

CSS:

html, body, .cover, #content, .overlay {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.cover {
    background: url("http://lorempixel.com/output/abstract-q-g-1152-839-1.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-shadow: inset 0px -120px 100px -10px rgba(0, 0, 0, 0.7);
    position: relative;
    color: rgb(255, 255, 255);
}
.filler {
    position:absolute;
    bottom:20px;
    left:0;
    width:100%;
    text-align: center;
    margin: 0;
    z-index:2;
}
.overlay {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: rgba(0, 0, 0, 0.5);
    z-index:1;
}
#content {
    padding:100px;
    background: url("http://lorempixel.com/output/city-q-g-1152-839-4.jpg");
    background-size: cover;
    background-repeat:no-repeat;
}