完成网页页面情况照片拉伸的两种方式

日期:2021-01-20 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

处理方式有两种:

1种是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中动态性插进1个div,随后在div里包括1张照片,访问器对话框更改尺寸时,动态性设定情况照片的规格。
拷贝编码

拷贝编码
编码以下:

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