Question

我在codrops上下载了这个例子的代码

http://tympanus.net/Blueprints/ScrollingLayout/

正如您所看到的，背景附件（在本例中为图像）是固定的，而任何添加的文本都会正常滚动，每个部分都会产生与前一个重叠的效果。我想让该部分的全部内容保持固定，让下一部分与前一部分重叠（即文本不应滚动）

这是编辑过的代码 -

    html, body, 
    .container,
    .scroller,
    .scroller section { 
        height: 100%; 
        margin: 0px;
    }
<!-- code to change below -->
    .scroller section {
        position: relative;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .scroller section {
        background-attachment: fixed;
    }
<!-- code to change above -->
    #section1 {
        background-image: url(../images/1.jpg);
    }
    #section2 {
        background-image: url(../images/2.jpg);
    }
    #section3 {
        background-image: url(../images/3.jpg);
    }
    #section4 {
        background-image: url(../images/4.jpg);
    }
    #section5 {
        background-image: url(../images/5.jpg);
}

请以任何方式（在css中）建议不仅要制作背景图像，还要将整个文本固定在该位置（即如何解决此css代码中某个部分的全部内容）

Answer 1

也许您希望将文本定位在视口上。这可以通过将其添加到CSS中来实现：

h1 { /* or whatever the selector is */
  position: fixed;
  top: 100px;
  left: 50px;
  ...
}

这将使元素（在这种情况下为h1元素）在页面上保持固定，并且在向下滚动页面时不会滚动。

解决css中一节的全部内容

1 个答案: