修复了Parallax网站上的文本

Question

我已经创建了this site，并试图在第一张幻灯片上实现固定文本(带有耐克篮球的那张幻灯片)。目前，我的背景图片中有“第一个”这类文字。有没有可能将它从背景中分离出来，并将文本放在它自己的div中？

我被难住了，因为第一张幻灯片是用三个独立的div创建的-一个是球的顶部，第二个是球的底部，第三个是球的放大倍数。我想将文本附加到第一个和第二个div中，但这会导致文本与页面一起滚动，而不是固定在适当的位置。

网站链接：http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html

Answer 1

可以，将position:fixed与left和top css属性一起使用。

例如：

#fixedText {
  position:fixed;
  left:100px;
  top:50px;
}

编辑：

为了适应幻灯片的重叠，您必须对幻灯片和文本应用z-index。

例如，您可以将页面类的z索引设置为2(和position:relative或z索引不生效)，将#fixedText规则的z索引设置为1，将#first规则的z索引设置为0。这将创建您想要的分层：

  #fixedText {
    position: fixed;
    left: 75px;
    top: 120px;
    font-size: 35pt;
    color: white;
    z-index: 1;
    font-family: helvetica;
  }

  #first {
    background: url(images/01.jpg) no-repeat fixed;
    height: 1000px;
    z-index: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
    z-index: 1;
    position: relative;
  }