Question

我创建了this site并试图在第一张幻灯片（Nike篮球版）上实现固定文本。目前，我有“第一个这样的”文本作为背景图像的一部分。是否可以将它与背景分开并将文本放在自己的div中？

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

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

Answer 1

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

e.g。

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

编辑：

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

例如，您可以为页面类提供z-index为2（并且position：relative或z-index不生效），＃fixedText规则为z-index为1，以及#first规则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;
  }

修复了视差网站上的文字

1 个答案: