divの背景を上にする方法は両方とも視差の背景のように振る舞います

Question

私は視差効果のための固定された背景を持ち、その上にセクションのタイトルを持つdivがあります。これに続いて私はメインのコンテンツ部門を持っています。私は明らかに画像のdivの内容を含めることができ、ちょうど背景として新しい画像を使用することができますが、私はdivコンテンツのサイズ、フォントなどを制御したいので、両方ともバックグラウンドのように動作させる必要があります。この効果は達成可能ですか？ここで

はサンプルコードです：タイトルのdivが固定され、視差背景のように動作させるために私は何を取得したいことです。非常に簡単であるべき

.parallax{ 
 
    background-image: url('http://i.stack.imgur.com/jGlzr.png'); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.title{ 
 
    position: relative; 
 
    display:flex; 
 
    height: 120px; 
 
    width: 120px; 
 
    border: 3px solid white; 
 
    left: calc(50% - 60px); 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.content{ 
 
    background-color: red; 
 
    height:800px; 
 
}

<div class="parallax"> 
 
    <div class="title"> 
 
    <h3> 
 
     A title 
 
    </h3> 
 
    </div> 
 
    <div class="content"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</div>

Answer 1

。あなたがする必要があるのはposition: relativeにposition: fixedへのあなたのタイトルのdivおよびコンテンツdivのを設定し、それをタイトルのdivの高さ+ボーダー（126px）のオフセットトップを与えるされています。そのよう

：

.parallax{ 
 
    background-image: url('http://i.stack.imgur.com/jGlzr.png'); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.title{ 
 
    position: fixed; 
 
    display:flex; 
 
    height: 120px; 
 
    width: 120px; 
 
    border: 3px solid white; 
 
    left: calc(50% - 60px); 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.content{ 
 
    height:800px; 
 
    position: relative; 
 
    top: 126px; 
 
    background-color: red; 
 
}

<div class="parallax"> 
 
    <div class="title"> 
 
    <h3> 
 
     A title 
 
    </h3> 
 
    </div> 
 
    <div class="content"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </p> 
 
    </div> 
 
</div>