0

最初のページの私のサイトでは、2つの画像を組み合わせて、夕日のように見せています。まるで太陽のようにロゴをそれらの間に配置したいのですが、これを実現することはできません。ロゴは現在、サイトの2ページ目にあります。Heresi the html：

<div id="intro">
     <div id="introbaggrundbagved"></div>
     <a name="section1" class="section">SECTION 1</a>
     <div id="logo">
     </div>
</div> <!--#intro-->

そしてcss：

#intro{
  background: url('images/introforan.png') no-repeat center;
  height: 900px;
  margin: 0;
  position: relative;
  z-index: 3;
}

#introbaggrundbagved{
    background: url('images/introbagved.png') no-repeat center;
    height: 900px;
    width: 1440;
    margin:0;   
    position: relative;
}

#logo{
    background: transparent url('images/logo.png') no-repeat center;
    width: 600px;
    height: 600px;
    position: relative;
    margin-left: 420px;
    margin-top: 100px;
    z-index: 2;
}
4

1 に答える 1

0

#logo親要素から div を取り出し#intro、兄弟の両方よりも大きい z-index を与える必要があります。次に、すべてのheader要素を#intro-wrapperdiv にラップします。さらに、 の代わりに を使用しpositionて要素を作成します。これにより、周囲の要素のドキュメント フローを乱すことなく、配置をより細かく制御できます。#logoposition: absoluterelative

また、 のプロパティをparallaxScroll更新する関数があるようです。これにより、2 つの画像の間に要素が配置されなくなります。 top#logo

    function parallaxScroll(){
      var scrolledY = $(window).scrollTop();
      $('#logo').css('top','+'+((scrolledY*.376))+'px');
        ....
      }
于 2012-12-18T00:56:12.300 に答える