我在想。当我在网站上向下滚动页面时,如何将其设置为跟随它的背景类型。例如https://alexcican.com/post/455k-users/。我想要像页面顶部那样的东西发生,有人能指出我正确的方向吗?
答案 0 :(得分:0)
熟悉职位(相对,绝对和固定)。然而,这是主要元素,它还会触发您需要注意的其他属性。例如,当您进行任何硬定位(例如固定)时,会丢失宽度和高度。因此,下面的项目必须纠正该高度。为了在没有任何故障的情况下正确执行此操作,请考虑内容的margin-top为100%。这将弥补硬定位。在处理硬定位时,您应该考虑使用的其他事项是z索引。由于固定定位会将元素本地放置在文档顶部。为了隐藏它,你应该把它放下一两层(如果需要的话)。
执行以下操作:
<div class="wrapper-parallax">
<div class="parallax">
<h1>Header</h1>
</div>
<section class="content">
<h1>Content</h1>
</section>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
.parallax {
width: 100%;
height: 450px;
background: url(http://all4desktop.com/data_images/original/4238051-background.jpg) center center fixed;
background-size: cover;
top: 0;
position: fixed;
z-index: -1;
}
.content {
height: 100%;
min-height: 1000px;
background: #ededed;
position: relative;
}
.wrapper-parallax {
margin-top: 100%;
}
h1 {
margin: 50px auto;
text-transform: uppercase;
text-align: center;
font-family: Helvetica;
font-size: 150px;
color: #9A1414;
}
.content h1 {
line-height: 500px;
color: #999;
}
看到它正常工作here