如何实现网页背景图片拉伸？_惠州前端培训学校

如何实现网页背景图片拉伸？今天我们跟着惠州北大青鸟老师一起来学习一下，希望对大家学习有帮助。

一种是CSS，使用background-size:cover实现图片的拉伸效果，但是IE8及以下版本不支持background-size，于是可以使用微软的滤镜效果，但是IE6不支持。

   body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}

另一种是使用jQuery，在body中动态插入一个div，然后在div里包含一张图片，浏览器窗口改变大小时，动态设置背景图片的尺寸。

   $(function(){
   $("body").append("<div id='main_bg' style="position:absolute;"/>");
   $("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
   cover();
   $(window).resize(function(){ //浏览器窗口变化
   cover();
   });
   });
   function cover(){
   var win_width = $(window).width();
   var win_height = $(window).height();
   $("#bigpic").attr({width:win_width,height:win_height});
   } 

想了解更多关于前端的资讯，可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟