您的位置：首页 > 其它

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

2013-12-01 14:50 267 查看

背景如何自适应拉升，不是平铺哦？可以用：

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 |

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";
}

效果实现~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Chrome absolute position

相关文章推荐

新的分享

章节导航

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	}