随着现在的大显屏越来越多，实现整个页面的背景相对来说是越来越困难。前段时间在《如何用CSS实现大背景样式》中和大家一起学习了web designer wall大师介绍的几种实现大背景制作的样式方法。但我们有时需要整个页面放一张大的背景图，而且让他适应任显屏的大小。听起来好像蛮复杂的一样，因为我们不知道我们的用户使用多大的显屏，所以我们也不知道我们要制作多大的背景图片才能适合。大家不用担心，今天给大家提供几种另个的大背景图的制作方法，用来帮助大家制作完美的页面背景。
为了让我们的页面实现大背景图，那么怎么做才能完美的实现页面的背景图片呢？我们需要在制作中记住以下几点：
一张图填充整个页面，而且不会有任何空白区产生；
背景图片能根据显屏进行缩放；
背景图片缩放时以保留图像的比例(宽高比)；
背景图片保持在页面的中心位置处；
不会给页面造成滚动条的出现；
以实现各浏览器的兼容性问题；
初看怎么要这么多要求呢？其实不用害怕，这些都不并不可怕，下面我们一起来看具体是如何制作，从而达到上面所说的种种要求：
一、CSS3方法：
首推的就是CSS3方法，CSS3给我们提供了一个属性background-size。我们可以纯粹使用这个属性，可以简单轻松的控制背景图片的大小。我们只要把背景图片放在“HTML”元素中，然后设置背景图片以固定方式显示就OK了。那么为什么不放在“body”中呢？那是因为html比body更好，因为它的高度总是和浏览器的高度一致。下面我们来看具体的代码：
html {
background: url(images/perfect-full-page-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
但是background-size只能在下面列表中的浏览器中才能正常工作：
为了兼容IE8以及其以下版本的浏览器，我们就需要使用IE的滤镜来处理，达到浏览器的兼容性：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale')";
这里最好使用绝对路径，所以最后使用CSS3的background-size实现页面的背景代码如下所示：
html {
background: url(images/perfect-full-page-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;/*webkit：safari and chrome*/
-moz-background-size: cover;/*firefox*/
-o-background-size: cover;/*opera*/
background-size: cover;/*w3c*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale')";
}
查看在线的效果。
注：这里有一点需要注意，如果使用IE滤镜来处理这个问题，最好是背景图片不要放在html和body中，你需要创建一个100%高度的div，这样更安全一些。
二、纯CSS方法一
很多同学都认为CSS3在处理浏览器的兼容问题很烦，那么我们来看一个Doug Neiner给我们提供的纯CSS的制作方法。
这种方法其实也很简单，使用这种方法需要在body元素下放一个img标签，并且设置一个最小高度保持永远填充浏览器的窗口，别的不多说，我们直接看代码：
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto !important;
height: 100%;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
而且Doug Neiner还给我们提供了一种媒体介质的处理方式：
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
这种CSS的处理方式，最终代码如下所示：
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto !important;
height: 100%;
/* 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% */
}
}
注：这种方法有一个小技巧需要特别注意，就是需要把页面的内容放在一个div中，并且需要给其加上一个position:relative的属性设置。
这种方式能在IE6以外的所有浏览器下运行正常，主要是因为在IE6下不识别“position:fixed”，如果想让其在IE6下也能完全运行，最好需要加上CSS的表达式处理，具体的处理方法主参考《浏览器兼容之旅的第五站:IE常见Bug——part3》。
查看在线效果。
三、纯CSS方法二
我们来看另外一种纯CSS3的处理方法，我们把背景图片放在一个div元素中，然后将这个div大小放大为浏览器窗口的两倍，然后在重置图片，仍保留其长度比能覆盖整个浏览器的窗口。具体请看下面的代码：
HTML Markup
CSS Code
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:25%;
left:25%;
right:25%;
bottom:25%;
margin:auto;
min-width:50%;
min-height:50%;
}
很可惜的是，这种方法在现代浏览器下能运行，但在IE6下是无法正常运行，所以大家在使用之时需要特别注意。另外这种方法和方法二一样，需要把其他内容放在一个div中，并且设置一个“position:relative;”才能正常运行。
查看在线效果。
四、jQuery方法
前面我们看了CSS的各种方法，最后我们在一起来看一种通过jQuery来实现的方法。这个方法思路也是来自于CSS的，我们在body中放入一张图片img，然后通过图片的宽高和当前浏览器的宽度进行比较，我们通过样式使图片宽高都保持浏览器的100%，使其达到填充浏览器的效果，具体我们来看下面的实现代码：
HTML Markup
CSS Code
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
jQuery Code
$(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(function() {
resizeBg();
}).trigger("resize");
});
不过这种方法的兼容性也不是很强，在IE6下无法正常运行，另外同样需要在页面的容包裹在一个div中，并且需要设置“postion:relative”值。
查看在线效果。
上面我们一起学习了四种方法实现背景图片布满整个页面的效果。综合下来各有千秋，CSS3嘛方便，整个IE兼容性太差,但是使用纯CSS和jQuery方法，在IE6下也无法运行正常，我个认为还是使用CSS3和配合IE滤镜的方法来制作更为完美：
html {
background: url(images/perfect-full-page-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;/*webkit：safari and chrome*/
-moz-background-size: cover;/*firefox*/
-o-background-size: cover;/*opera*/
background-size: cover;/*w3c*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/perfect-full-page-bg.jpg', sizingMethod='scale')";
}
具体使用哪一种方法，大家在实际制作中需要慎用，如果您有更好的方法，记得与我们一起分享,你可以直接在评论中给我留言。最后结束本教程之前再一次感谢Chris Coyier给我们带来这么好的教程
如需转载烦主注明出处：W3CPLUS
扫一扫
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
