我在很多网站上都看到过这个技巧,我想将它用于我自己的项目。
我有一个background.jpg
非常大的图像,只是为任何屏幕尺寸做好准备。
我希望将背景图像居中到访问者的窗口。
我的意思是,在滚动窗口内容时会移动,但背景会保持原位 - 垂直和水平居中。
顺便说一句,大多数观众都会有旧的蹩脚PC,所以最好不要闪烁,如果是JS的话。
我在很多网站上都看到过这个技巧,我想将它用于我自己的项目。
我有一个background.jpg
非常大的图像,只是为任何屏幕尺寸做好准备。
我希望将背景图像居中到访问者的窗口。
我的意思是,在滚动窗口内容时会移动,但背景会保持原位 - 垂直和水平居中。
顺便说一句,大多数观众都会有旧的蹩脚PC,所以最好不要闪烁,如果是JS的话。
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 */
}
试试这个小提琴中的内容:http: //jsfiddle.net/maniator/3RRYe/3/
demo
看看是否适合你^_^
将您的图像放在身体背景上:
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;
}