A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 网页制作 > 网页背景图片拉伸方法

网页背景图片拉伸方法

时间:2015-03-26 11:33作者:zhao人气:203

一种是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});

}

标签网页,背景图片,拉伸,方法,一种,CSS,使用,backgr

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号