jquery - 在图像覆盖的 header 标记内带有顶部边距的带边框的文本标题

Question

这是 jsfiddle .

我正在尝试创建一个图像覆盖的 header ，该 header 响应性地填充窗口的可见部分。我遇到的问题是，当我尝试在我的 <h1> 上设置最高边距时标记图像也被下推。

我该如何解决这个问题？是否有更好的替代方案来实现我在这里尝试做的事情？

编辑:我想我已经解决了。受到下面几条评论的启发，我能够重新安排一些内容，结果发现我确实需要一些填充。我只是在不同的地方需要它。这是更新的 fiddle .

Answer 1

这里是不使用JS的解决方案

HTML

<header class="head">
     <h1>Heading</h1>

</header>
<div class="container"></div>

CSS

html, body {margin:0;padding:0;height:100%;}
body{background:#ccc}
header.head{background:#0f0}
.container {
    background: url('http://placehold.it/1920x1080/') no-repeat center center fixed;
    background-size: cover;
    height:100%;
}
h1 {
    text-align: center;
    font: bold 2em sans-serif;
    border: 5px solid;
    margin: 16px auto;
    padding: 8px;
    width: 68%;
    margin-top:30px; //set whatever margin you need 
}

Demo