python全屏背景_[转载]完美的背景图全屏代码

具有以下特点：

填满整个页面，没有空白空间

能缩放图像

保留图像尺寸比例

图像居中

不因图像原因产生滚动条

更多地支持全部浏览器

不使用类似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