網頁背景圖片拉伸效果
阿新 • • 發佈:2019-02-09
弄了很久才發現原來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;
})