京鱼网：www.jingfish.com
这里是这个技术将要达到的效果： 用图像填充整个页面，没有空白； 按需的缩放图像； 保持图像的比例； 图像集中于页面上； 不会有滚动条产生； 跨浏览器的兼容性； 不会有像Flash那样花哨的东西。
在此之前，我们读过“调整背景图尺寸”一文，但是读者 Doug Shults 发给我一个链接，里头包含了一个让人非常敬佩的技术，我想这比之前的任何技术都要好。
这个技术和上面的背景图归功于 这个站点。这里是这个技术将要达到的效果：
- 用图像填充整个页面，没有空白
- 按需的缩放图像
- 保持图像的比例
- 图像集中于页面上
- 不会有滚动条产生
- 跨浏览器的兼容性
- 不会有像Flash那样花哨的东西
这是一个高难度的任务，我们将用不同的素材来完成它。首先，由于图片需要缩放，一个传统的CSS背景图（background-p_w_picpath）已经不能胜任。那样的话就允许我们使用一个内嵌图像。
方法一
这个内嵌图像将被放置在容器里面，每个我们要完成的目标中。
以及CSS：
* {margin: 0;
padding: 0;
}
- html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
} - #bg {
position: fixed;
} - #bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
} - #bg td {
text-align:center;
vertical-align:middle;
} - #bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
} - #cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
} - .box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 Georgia, Serif;
} $(function(){
$(".box").prepend('');
$("#focus-stealer").focus();
});- img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px; - /* Set up proportionate scaling */
width: 100%;
height: auto; - /* Set up positioning */
position: fixed;
top: 0;
left: 0;
} - @media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
} - div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative; - /* These have no effect on the functionality */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
} - body {
/* These rules have no effect on the functionality */
/* They are for styling only */
margin: 0;
padding: 20px 0 0 0;
}
这只是稍微提升了一点 CSS 载荷而已，但是它能够办成大事！只需要单独的执行它，但是如果我们要实际应用到一个页面上又将如何呢？
在html和body元素中设置它的溢出值为hidden（overflow:hidden）时可能会吓到你，因为像那样做的话，如果没有滚动条就会完全遮住页面的内容。
为了拿回那些内容，我们要采用另一个容器。这个会放置在背景的上面，设置为浏览器窗口的全宽高，并把overflow设回到auto。这样一来，在这个容器里我们可以很安全的放置内容。
CSS：
使用 JavaScript 做修正
对于 IE6，这里有 MooTools 素材来修正它的兼容性。
下面这段内容被笔者划去：In Firefox, default “focus” is placed on the body element when the page loads. That means that pressing the space bar will scroll down the body, which would reveal some ugly white space. We can use some jQuery for a quick fix, to remove that focus and place it on a hidden element instead, removing that problem:
增加修正定位的代码，排除#bg容器的滚动条和向下滚动的问题。CSS FTW!
已发现的Bugs：
在 Safai4 和 Chrome 下，min-height无法被执行无法垂直调整图像。
方法二
和过去一样，非常感谢 Doug Neiner 提供的这个替代方案。
这里，我们可以使用CSS而无需借助JavaScript，所用的图像只是一个Class名为“bg”的内嵌图像，而无需额外的增加太多代码。对于不愿意增加过多代码的伙计们来说这是“一场大胜仗”。
需要说明的是，这并不能完全适应所有的输出要求，比方说在IE7下不能居中，在IE6下无法完全正常工作，可能无法按照原始图像的比例缩放，但是，它更加简单且没有bug，是个可靠的选择。下面是它的CSS：
原文名称：Perfect Full Page Background Image
原文地址：http://css-tricks.com/perfect-full-page-background-p_w_picpath/
译文地址：http://www.osstyle.cn/html/article_kzsx/20100824667156838933.html
*此文为发现酷站翻译，转载请注明出处：www.osstyle.cn
