背景图片的平铺方法有很多种，纯色背景，渐变背景，图片背景，今天讲的是移动端的图片背景~~~~
<style> html,body{height:100%;padding:0;margin:0;} .body{background: url(image.jpg) no-repeat 0 0;background-size: 100% 100%;} </style>
<body class="body"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script> <script> (function(w){ function changeBg(params){ var self = this; self.direction = 1;//1为竖平，2为垂直 self.bodyWidth = self.bodyHeight = self.width = self.height = 1; function afterChangeDirection(){ self.bodyWidth = $(document).width(); self.bodyHeight = $(document).height(); if(self.direction == 1){ document.body.style=""; }else{ var h = self.bodyWidth / (self.width/self.height); h = Math.max(self.height,h); $("body").height(h + "px"); document.body.style.backgroundSize=self.bodyWidth+"px "+h + "px"; } } function setDirection(dir){ self.direction = dir; afterChangeDirection(); } function init(){ $.extend(self,params); self.bodyWidth = $(document).width(); self.bodyHeight = $(document).height(); if(w.matchMedia) { var mql = w.matchMedia("(orientation: portrait)"); if (mql.matches) {// 如果有匹配，则我们处于垂直视角 setDirection(1); } else {//水平方向 setDirection(2); } mql.addListener(function(m) { if(m.matches) {// 改变到直立方向 setDirection(1); } else {// 改变到水平方向 setDirection(2); } }); }else if(typeof(w.orientation) != 'undefined'){ w.addEventListener('orientationchange', function(event){ if ( w.orientation == 180 || w.orientation==0 ) { setDirection(1); }else {//if( window.orientation == 90 || window.orientation == -90 ) setDirection(2); } }); } } init(); } w.changeBg = changeBg; })(window); //这个代码放页面里，上面代码放JS文件里 $(function(){ new changeBg({ 395, //背景图片实际宽度 height:700 //背景图片实际高度 }); }); </script> </body>