Question

我正在尝试创建一个图像覆盖的标题，它会响应地填充窗口的可见部分。我遇到的问题是，当我尝试在我的<h1>标签上放置一个上边距时，图像也会被推下来。

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

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

Answer 1

这是一个编辑。我把CSS改成了这个，它运作了。

h1 {
    text-align: center;
    font: bold 2em sans-serif;position:relative;
    border: 5px solid;
    margin: 16px; margin-top:100px;
    padding: 8px;
    width: 68%;
}

Answer 2

这是不使用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

Answer 3

为什么不使用填充而不是边距？

边缘文本标题与图像覆盖标题标记中的顶部边距

3 个答案: