3

私はこのサイトを作成し、最初のスライド(Nikeバスケットボールのスライド)に固定テキストを実装しようとしています。現在、背景画像の一部として「この種の最初のもの」というテキストがあります。それを背景から分離して、テキストを独自のdivに配置することは可能ですか?

div最初のスライドは、ボールの上部、ボールの下部、ボールの倍率の3つを別々に使用して作成されているため、アイデアに困惑しています。1番目と2番目のdiv内にテキストを添付することを考えましたが、テキストを所定の位置に固定するのとは反対に、ページとともにスクロールします。

サイトリンク:http ://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html

4

1 に答える 1

6

はい、position:fixedwith属性lefttopcss属性を使用します。

例えば

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

編集:

スライドの重なりに対応するz-indexには、スライドとテキストにを適用する必要があります。

たとえば、ページクラスに2のz-index(およびposition:relativeまたはz-indexが有効にならない)、#fixedTextルールに1のz-index、#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;
  }
于 2012-06-06T23:43:23.320 に答える