具有以下特点:
填满整个页面,没有空白空间
能缩放图像
保留图像尺寸比例
图像居中
不因图像原因产生滚动条
更多地支持全部浏览器
不使用类似FLash的东西
帅气,简单,先进的css3方法
CSS
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
支持
Safari 3+
Chrome any+
IE 9 +
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
查看Demo
CSS-Only Technique #1
CSS
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) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
支持
Any version of good browsers: Safari / Chrome / Opera / Firefox
IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
IE 9: Works
CSS-Only Technique #2
HTML