CSS背景图像叠加

时间:2016-02-19 17:47:07

标签: css

我在想。当我在网站上向下滚动页面时,如何将其设置为跟随它的背景类型。例如https://alexcican.com/post/455k-users/。我想要像页面顶部那样的东西发生,有人能指出我正确的方向吗?

1 个答案:

答案 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