您现在的位置是：网站首页> 编程资料编程资料
实现网页背景图片拉伸的两种方法_心得技巧_网页制作_
2021-09-11
1172人已围观
简介 使用background-size:cover实现图片的拉伸效果，使用jQuery动态设置背景图片的尺寸，这两种方法均可实现
解决方法有两种：
一种是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("");
$("#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});
}
一种是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("");
$("#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});
}
相关内容
- ipad上借助firebug工具来进行页面调试_心得技巧_网页制作_
- 一个好的用户界面设计的37个技巧（图文）_心得技巧_网页制作_
- 网页中内容显示过多如何从bottom快速回到top_心得技巧_网页制作_
- 深入理解指定IE浏览器渲染方式_心得技巧_网页制作_
- Web前端开发中找错的基本思路_心得技巧_网页制作_
- Bootstrap3.0学习笔记之按钮与下拉菜单_心得技巧_网页制作_
- Bootstrap3.0学习笔记之CSS相关补充_心得技巧_网页制作_
- Bootstrap3.0学习笔记之特殊的效果（显示隐藏、消除浮动、关闭按钮等）_心得技巧_网页制作_
- Bootstrap3.0学习笔记之按钮的样式_心得技巧_网页制作_
- Bootstrap3.0学习笔记之表格相关_心得技巧_网页制作_
