这是 jsfiddle .
我正在尝试创建一个图像覆盖的 header ,该 header 响应性地填充窗口的可见部分。我遇到的问题是,当我尝试在我的 <h1>
上设置最高边距时标记图像也被下推。
我该如何解决这个问题?是否有更好的替代方案来实现我在这里尝试做的事情?
编辑:我想我已经解决了。受到下面几条评论的启发,我能够重新安排一些内容,结果发现我确实需要一些填充。我只是在不同的地方需要它。这是更新的 fiddle .
最佳答案
这里是不使用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
}
关于jquery - 在图像覆盖的 header 标记内带有顶部边距的带边框的文本标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28418347/