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 |

copy code |

?

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

CSS |

copy code |

?

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

Javascript |

copy code |

?

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

Javascript |

copy code |

?

1	var clientWidth = window.innerWidth;
2	var clientHeight = window.innerHeight;
3	bg_img.style.width= clientWidth+"px";
4	bg_img.style.height= clientHeight+"px";
5	bg.style.width= clientWidth+"px";
6	bg.style.height= clientHeight+"px";
7	}

效果实现~

转载于:https://blog.51cto.com/boss88/1334391