4

と の 2 つの画像がA (700x1500px)ありB (700x100px)ます。A をページの背景画像に設定しました。B も背景画像のようなものにしたいのですが、A の上に描画されます。

B はページの Y < 300px に配置できないため、ページの上部にいる場合、B が画面にまったく表示されない場合があります。ただし、ページの Y >= 300px にいる場合、B が表示され、ブラウザー ウィンドウの下部に固定されます。ここにイラストがあります: 青いボックスはAで、赤いボックスは ですB, 緑の線は300pxマークを示しています.

ここに画像の説明を入力

これは Javascript で実現できますが、CSSと通常の HTML マークアップを使用して実現できますか?

4

1 に答える 1

0

私の理解が正しければ、ページの最小高さが 300px であれば、この種の効果を得るために多くの CSS スティッキー フッター手法の 1 つを使用できるはずです。

そのように: http://cleanstickyfooter.herokuapp.com/
または: http://www.cssstickyfooter.com/
または: http://mystrd.at/modern-clean-css-sticky-footer/

または、テキストが流れる厳密な背景画像の場合:

フローティング画像に固定位置の div を使用してみましたか? 高さ 100%、最小高さ 300px + 画像の高さを指定し、その div の背景画像を下部に設定します。このようなもの: http://jsfiddle.net/s_Oaten/JZhsw/

#fixedBG {
    position: fixed;
    z-index: -1;
    height: 100%;
    min-height: 350px;
    width: 100%;
    background: #eee;
    background: url(path_to_image) bottom left repeat-x;
}
于 2013-08-21T12:34:05.447 に答える