CSS+html+jquery如何实现拉伸背景图片-创新互联

这篇文章将为大家详细讲解有关CSS+html+jquery如何实现拉伸背景图片，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

方法一：CSS方法，这个方法有个缺陷，就是要定死高度，而且不兼容IE。

    body{width:100%; height:700px; margin:0; url(p_w_picpaths /banner11.jpg) no-repeat; padding:0; background-size:100% 100%;) ;
}



    拉伸背景图片

方法二：jquery+CSS,都兼容

    body{width:100%; height:100%; margin:0; padding:0;}



    $(function(){
        $("body").append("");
        $("#main_bg").append("");
        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});
    }

方法三：html+css,这是个死办法，呵呵，但是兼容性很好。

body{width:100%; height:100%; margin:0; padding:0;}
#main_bg,#bigpic{width:100%; height:100%;}