1

CSS を使用して垂直方向と水平方向に中央揃えされた背景画像があります。ウィンドウが背景画像を表示するのに十分な大きさである限り、見栄えがよく、機能しています。

私が抱えている問題は、ウィンドウのサイズが bg 画像よりも小さくなるように変更されたときに発生します。これが発生すると、背景画像は引き続き中央に配置されますが、代わりに背景画像の上部と左側に最小限のマージンを維持する必要があります。BG 画像は 900px x 700px で、使用したコードは次のとおりです。

#main_wrapper {
    background-image: url(../images/background.jpg);
    position:relative;
    width:900px;
    height:700px;
    left:50%;
    top:50%;
    margin-left:-450px;
    margin-top:-350px;
}

ウィンドウが十分に大きい場合は背景画像を水平方向および垂直方向の中央に配置し続ける必要がありますが、ウィンドウが背景画像よりも短い場合は上部に最小マージンがあり、左側に最小マージンがあります。ウィンドウが背景画像よりも狭い場合。どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

1

これが にある場合は<body>、ボディの先頭に 2 つの余分な div を追加し、絶対位置に配置し、背景色を白にして、その領域で背景画像が表示されないようにします。

次に、本体に残っていたものを で包み、 に<div>しますposition: relative。

これはあなたが望む結果になるはずだと思います。

于 2012-07-13T10:33:14.260 に答える