2

インターウェブ全体でこの質問に対する答えを探していましたが、答えが見つかりませんでした。背景と同じ背景画像で満たされた透明なヘッダーがあり、メインのdivが必要です。その下をスクロールして、テキストを非表示にします。HTMLは次のとおりです。

<body>
    <div class="wrapper">
    <div class="top">
    <!-- This is my header -->
    </div>
    <div class="main">
    [.....]
    </div>

そしてここにCSSがあります：

.top {
    background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
    margin-top:0px;
    height:100px;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:central;
    padding-left:0px;
    padding-right:opx;
}

.main {
    position:absolute;
    top:100px;
    bottom:20px;
    left:0;
    right:0;
    width:990px;
    margin:0 auto;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    z-index:-1;
}

ここで見つけることができるjsFiddleを作成しました：http：//jsfiddle.net/qcaJJ/。これを機能させる方法について教えていただけますか？前もって感謝します！

ps。フッターを気にしないでください、私は私の別のページからのフッターを使用しました、私はこのページにこれを望んでいません：p

pps。誰かがナビゲーションをその場所にとどまらせ、main2 divをスクロールさせる方法を知っているなら、あなたは私のヒーローです！HTMLとCSSは初めてです。

4

3 に答える 3

1

ここで私のJSFiddleを参照してください：http：//jsfiddle.net/qcaJJ/3/

fixedページの残りすべての絶対位置ではなく、ヘッダーの位置が必要です。

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:red;
}

.content{
    margin-top:100px;
    font-size:180%;
}
于 2013-03-16T21:07:37.443 に答える
1

ヘッダーに固定位置を使用することに加えて、他の回答が指摘したように、透明な背景画像も使用しているため、メインセクションが下にスクロールしても表示されます。ヘッダー div が下にスクロールしているものをカバーするように、次のように背景色を追加する必要があります。

.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
于 2013-03-16T21:26:15.557 に答える
0

それが機能するためにtopは必要position:fixedです。これにより、常に画面の上部に固定されます。

常に他のすべての上にとどまるように、z-indexを次のように設定することもできます。1000

于 2013-03-16T21:08:42.950 に答える