3

私は、4つのdivで構成され、それぞれが独自の固定背景画像を持つ単一ページのサイトを構築しています。さまざまな画面サイズで見た目を維持したいので、画像は画面よりもはるかに広くなっていますが、背景画像を真に中央に配置する方法を知っている人はいますか。したがって、小さなモニターでは画像の中央を表示し、大きなモニターでは画像の同じ場所を表示しますが、周囲に多くの画像を表示します。このサイトが持っているように

http://www.cantilever-chippy.co.uk/

ウィンドウのサイズが変更されると、それに応じて背景画像が移動します。

どうもありがとう。

4

3 に答える 3

17

リンクからcssを確認すると、解決策がわかります。

#images #bg_1 {
  background-image: url(images/bg/1.jpg);
  background-position: 50% 0;
}

そしてdiv：

<div class="bg_block" id="bg_1" style="height: 1200px; width: 1055px;"></div>

JavaScriptにより、サイズ変更のたびに＃bg_1の幅が変更されます。

window.onresize = function(event) {
    $("#bg_1").css("width", $(window).width());
}
于 2012-12-12T13:31:06.457 に答える
9

これはうまくいくはずです

#bg{ 
   background-image:url(yourURL);
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center; 
}

background-fixedプロパティは、FirefoxおよびOpera用です。

于 2012-12-12T13:33:54.277 に答える
2

background-positionCSSプロパティを探しています。

http://www.w3schools.com/cssref/pr_background-position.asp

ピクセル単位の絶対オフセットを取ることができます（したがって、画像のサイズとdivのサイズがわかっている場合は、画像を表示する場所を正確に計算できます）。または、パーセンテージで渡すことができます。また、負の数を取ることができるため、画面から任意の方向にオフセットできます。

ただし、あなたの場合は、単純な「中心」の値が必要になるでしょう。このようなものが機能するはずです：

/* This should center the background image in the div. */
div.background_image_block {  
  background-position: center center;
}
于 2012-12-12T13:31:40.013 に答える