3

我在很多网站上都看到过这个技巧,我想将它用于我自己的项目。
我有一个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

试试这个小提琴中的内容:http: //jsfiddle.net/maniator/3RRYe/3/
demo
看看是否适合你^_^

于 2011-03-28T14:14:07.647 回答
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 回答