QZone V8改版之“背景自适應”

背景如何自适應拉升，不是平鋪哦？

可以用：

CSS |

copy code |

?

1	background-size:100%100%

可是….

浏覽器支援

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支援 background-size 屬性。

是以…

一起來看看Qzone的登陸界面：http://qzone.qq.com/

它的實作代碼，背景圖不放在body中，用img的方式，實時計算螢幕大小：

于是，我也來試試：

HTML |

	<divclass="bg"id="bg">
2	<imgsrc="bg.jpg"id="IMG">
3	</div>

	.bg{position:absolute;left:0;top:0;z-index: -1;overflow:hidden;}
	.bg img{position:absolute;left:0;top:0;z-index: -1;}

Javascript |

	var bg = document.getElementById("bg");
	var bg_img = document.getElementById("IMG");
04	bg_img.onload=function(){
05	re_size();
06
07	}
08
09	window.onresize=function(){
10	re_size();
11	}
12
13	function re_size(){

	var clientWidth = window.innerWidth;
	var clientHeight = window.innerHeight;
	bg_img.style.width= clientWidth+"px";
	bg_img.style.height= clientHeight+"px";
	bg.style.width= clientWidth+"px";
	bg.style.height= clientHeight+"px";
	}