您的位置：首页 > 编程语言

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

2015-08-23 19:27 330 查看
具有以下特点：

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

能缩放图像

保留图像尺寸比例

图像居中

不因图像原因产生滚动条

更多地支持全部浏览器

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

<div id="bg">   <img src="images/bg.jpg" alt=""> </div>


CSS

#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}

注：使用DIV应该是为了能够使图片居中，单独img达不到

JQuery

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

Javascript代码

$(window).load(function() {

var theWindow        = $(window),
$bg              = $("#bg"),
aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}

}

theWindow.resize(resizeBg).trigger("resize");

});


支持

Safari / Chrome / Firefox (didn't test very far back, but recent versions are fine)

IE 8+

Opera (any version) and IE both fail in the same way (wrongly positioned, not sure why)

如果通过Js添加的图片，需要添加 {width: auto; and height: auto;}以便支持 in IE 8, 9, or 10.


转载自：https://css-tricks.com/perfect-full-page-background-image/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航