1

画面全体をカバーする背景画像が必要なWebサイトの作成で忙しいのですが、訪問者が下にスクロールすると他のコンテンツが表示されます。

これまでのところ、2つのdiv（＃container_page1と＃container_page2と呼んでいます）を作成してこれを機能させました。これは最初のdivのcssです：

#container_page1 { 
    background-image:url(images/background.jpg); 
    background-size: cover;
    position:absolute;
    margin:0px;
    width:100%;
    height:100%;
}

これは2番目のdivのcssです：

#container_page2 {
    background-color: #F00;
    height: 2000px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

問題は、2番目のdivのコンテンツが最初のdivの下に表示されることです。これは、明らかに最初のdivが絶対位置にあるという事実が原因です。

もちろん、2番目のdivのコンテンツをマージンまたはパディングで下に配置することはできますが、画面解像度が異なるため、これはうまく機能しません。

ここで私がこれまでに行ったことを見ることができます：http：//kmnew.kadushimarketing.com/index.php。2番目のdivのアンカーにリンクする[詳細]ボタンも表示されます。

最初のdivが終了するところから2番目のdivを開始するという提案はありますか？

4

2 に答える 2

3

2つのdivを1つの親divにラップします。次に、その親divに絶対位置を指定し、そのdiv内で2つの内側のdivを隣り合わせに配置します。

于 2012-11-09T17:18:04.413 に答える
1

各セクションに独自の特別な背景があり、ブラウザのサイズと正確に一致する必要がある場合、なぜ絶対位置を使用するのでしょうか。

次のようなスタイルを使用する：

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

section{
    width:100%;
    height:100%;
    background-image:url(images/background.jpg); 
    background-size: cover;
}

次に、すべてのコンテンツdivを相対的に配置すると、ブラウザーサイズの背景を維持し、セクションを順番にスタックできるようになります。

セクションコンテンツの位置を制御する場合は、次のような構造を使用できます。

<section>
    <div class="content">
        Section content goes here
    </div> 
</section>

対応するCSSの場合：

section .content{
    width: 500px;
    margin:0 auto;
}

これにより、コンテンツが500pxの幅に固定され、画面の中央に配置されます。お役に立てれば！

于 2012-11-09T18:59:42.727 に答える