1. 程式人生 > >網頁背景圖片拉伸效果

網頁背景圖片拉伸效果

弄了很久才發現原來background-image的大小不會隨視窗大小變化,也不會有自動拉伸的效果的。。

然後弄了半天還是用js控制的,網上查的程式碼加上自己寫的,混搭。。然後成功了。。

很明顯是瞎貓碰死耗子。。最近放假比較懶,所以沒有仔細鑽研了。。QQ空間的背景圖片控制也是用js的,不過好像用了Bootstrap框架,當時借用沒成功。

我自己的程式碼也很亂的。。而且我也不太明白div的那個style 的設定是為嘛,否則圖片周圍就會有白色的間距。

 <div id="bg" style="width:100%;height:100%;position:absolute;z-index:-1;top:0px; text-align:center; vertical-align:middle;left:0px;">
      <img src="img/ly.png" id="back"/>
      </div>
var winWidth = 0;
     var winHeight = 0;
      winWidth=document.documentElement.clientWidth;
      winHeight=document.documentElement.clientHeight;

    $(document).ready(function(){
      $('#back').css("width",winWidth);
      $('#back').css("height",winHeight;
})