修复了视差网站上的文字

Question

我创建了这个网站,并试图在第一张幻灯片上实现固定文本(与Nike篮球一起).目前,我有"第一个这样的"文本作为背景图像的一部分.是否可以将它与背景分开并将文本放在自己的div中？

由于第一张幻灯片是通过使用三个单独的div- 一个用于球的顶部,第二个用于球的底部,第三个用作球的放大率,因此我难以接受.我想在第一个和第二个div中附加文本,但它会导致文本与页面一起滚动,而不是将其固定到位.

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

Answer 1

是的,使用position:fixedwith left和topcss属性.

例如

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

编辑:

为了适应幻灯片的重叠,您必须z-index将幻灯片和文本应用于幻灯片.

例如,您可以为页面类提供z-index为2(并且position:relative或z-index不生效),#fixedText规则为z-index为1,#first rule为z- index为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;
  }