全屏

给网页设置背景图片非常简单,但是当浏览器的宽高度变化之后,如何保证背景图片一直充满整个页面呢?比如像:http://www.lofter.com/

实现方法

方法1:background-size:cover

background-size:cover是CSS3中才有的,下面做一个测试,先在body里面放一个div,然后给它加一些基本的样式:

div.bg{
	position:fixed;
	width:100%;
	height:100%;
	background:url(bg.jpg);
	background-size:cover;
}

使用background-size:coverdemo

方法2:javascript

很明显,并不是所有的浏览器都支持background-size:cover,所以,还需要JS还完成:

我们把HTML结构改一下,把图片放入HTML中:

<img src="bg.jpg" alt="" class="bigBg" />

先计算一下图片的宽高比:

$imgScale = $bigBg.innerWidth()/$bigBg.innerHeight();

然后定义个一个函数,这个函数中再计算出窗口(window)的宽高比,如果窗口的宽高比小于图片的宽高比,那说明此时窗口的高度大于图片的高度,这个时候只要将图片的高度设置成窗口的高度,宽度自适应就可以了,反之亦然:

function bgControl(){
	$winScale = $win.width()/$win.height();
	if($imgScale>$winScale){
		$bigBg.height($win.height());
		$bigBg.width("auto");

	}else{
		$bigBg.width($win.width());
		$bigBg.height("auto");
	}
}

最后在网页加载的时候和窗口缩放的时候调用bgControl()即可:

bgControl();
$win.resize(function(){
	bgControl();
});

JS控制全屏背景图Demo