3

このトリックは多くの Web サイトで見たことがあり、自分のプロジェクト用に作りたいと思っています。どんな画面サイズにも対応できるように、非常に大きな
画像があります。 背景画像を訪問者のウィンドウの中央に配置したいと考えています。 つまり、スクロールしている間、ウィンドウのコンテンツは移動しますが、背景はそのままで、垂直方向と水平方向の中央に配置されます。 background.jpg

ところで、視聴者のほとんどは古い安っぽい PC を持っているので、JS の場合は、ちらつきを抑えたほうがよいでしょう。

4

3 に答える 3

9 
body
{
    background-image: url('background.jpg');
    background-repeat: no-repeat; /* you know... don't repeat... */
    background-position: center center; /*center the background */
    background-attachment: fixed; /*don't scroll with content */
}
于 2011-03-28T14:16:29.247 に答える
0

体の背景に画像を配置します。

body{ background-image:url('your/image/url'); }

ボディ内にdivを配置します。

<body><div class="div-body">{your site's contents}</div></body>

次のようなcssセレクターを作成します。

.div-body{
   overflow:scroll;
   width: 100%;
   height: 100%;
   display: block;
   float: left;
}
于 2011-03-28T14:19:58.223 に答える
0

このフィドルの内容を試してみてください: http://jsfiddle.net/maniator/3RRYe/3/
demo
それがうまくいくかどうかを確認してください ^_^

于 2011-03-28T14:14:07.647 に答える