4

このような投稿が他にもあることは知っていますが、正確な答えが見つからないようです...だから...

背景画像が互いにフェードインするjqueryスライドショーを作成したいので、bodyタグに背景画像を配置する代わりに、画面全体を埋めるdivを作成し、メニューなどの他の要素を配置していますトップ。しかし、ビューポートをメニューの高さよりも小さくして下にスクロールすると、背景色のブロックが画像の上を移動します。これを修正するために考えられるすべてのことを試しましたが、完全に行き詰まっています。

これは簡略化されたバージョンです。赤いブロックは画像​​が表示される場所、黒は背景色、メニューはグレーでオーバーレイされます。CSS:

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #000000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    line-height: 1em;
    color: #9E9E9E;
    position: relative;
}
body {
    text-align: center;
}
* {padding: 0px; margin: 0px}
#wrap {
    width: 100%;
    min-height: 100%;
    background-color: #900;
    position: absolute;
    z-index: 1000;
}
#menu_wrap {
    width: 390px;
    min-height: 100%;
    background-color: #656262;
    position: absolute;
    z-index: 9999;
    background: rgb(101, 98, 98);
    background: rgba(101, 98, 98, 0.9);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
}
#menu_wrap #menu_content {
    padding: 40px;
    height: 500px;
}

HTML:

<div id="wrap"></div>

<div id="menu_wrap">
    <div id="menu_content">Menu content goes here - it could be any height.</div>Menu extends to here.
</div>

どんな助けでも大歓迎です。本当に単純なことを見逃したのかもしれませんが、レンガの壁に頭をぶつけているような気がします。ありがとう。

4

1 に答える 1

3

これは、あなたがやりたいことをすると思うjsfiddleリンクです。

http://jsfiddle.net/Alfalfamale/dCgRW/1/

セットアップの問題は、ラップ div の最小高さ (100%) が常に 100% の親の高さになることです。これは常にビューポート サイズのみである本体です。

これを修正するために、メニューをラップ内に移動し、絶対配置ではなくフロートにしました。このようにして、メニューはドキュメントの「フロー内」にとどまり、 のスペースを占有し#wrapます。overflow: hidden次に、ラップに追加して、基本的に左側のメニューをクリアします。

フロートのセットアップに必須ではないいくつかのスタイルを残している可能性があります。それらを自分で選択できると確信しています:)

于 2012-11-12T15:08:54.347 に答える