手机
当前位置:查字典教程网 >网页设计 >心得技巧 >实现网页背景图片拉伸的两种方法
实现网页背景图片拉伸的两种方法
摘要:解决方法有两种:一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持backgroun...

解决方法有两种:

一种是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'/>");

$("#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});

}

【实现网页背景图片拉伸的两种方法】相关文章:

网页中引用jQuery的方法

网页flash动画不显示的解决方法

网页设计中对于图片格式与设计关系的详解

创建吸引访问者的网站内容的14种方法

CSS中浏览器对尺寸和宽高解释差异的解决方法

用js实现css3效果的圆角方法

关于网页配色中的叠柔配色法的详解

网页改版是家家难念的经

网页FOUC问题导致网页混乱的解决方法

内容网页中关于图片预览的设计

精品推荐
分类导航