Question

我正在尝试将我的网站标题设置为完整的背景图片，但仍允许用户向下滚动到网站的下一部分。我正在使用正文背景图像来防止图像周围出现任何白框/边距，但需要在图像之后（以及图像顶部）放置内容。

这是HTML：

<header>
    <h1>Olivia E Thorne</h1>
    <p>Brighton, UK</p>
</header>


</body>
</html>

这是CSS：

body {
    background:url('header.png') #A98436 no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

header{
    position: fixed;
    color: whitesmoke;
    font-family: "Segoe UI";
    font-size: 1em;
    line-height: 50%;
    top: 35%;
    left: 45%;
    z-index: 100;
}

我没有在图像上包含标题，因为我最终会动画它，所以它需要能够定位在图像的顶部。我还需要防止图像周围出现任何白色“框架”（因此将其直接放入HTML中无效）。

Answer 1

<header>
<h1>Olivia E Thorne</h1>
<p>Brighton, UK</p>
</header>
<div class="next"> <p>Some content...</p></div>
</body>
</html>

和CSS：

body {
background:url('header.png') #A98436 no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

header{
position: fixed;
color: whitesmoke;
font-family: "Segoe UI";
font-size: 1em;
line-height: 50%;
top: 35%;
left: 45%;
z-index: 100;
} 
.next{
position:relative;
top: 500px; (or 50% or whatever the height of the pic is)
}

在背景图像后定位文本（背景大小：封面）

1 个答案: