页面背景图片的拉伸实现代码
页面背景图片的拉伸实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:1.用js插入一张图片并控制图片宽高$(function(){$(".bd").append("");$("#mainbg").append...

<span><strong><span>1.用js插入一张图片并控制图片宽高</span></strong></span>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

$(".bd").append("<div id='mainbg'/>");

$("#mainbg").append("<img id='im' src='a82a2e72e7af59296db0d63e3d2ecc5e!n1200.jpg' />");

recover();

$(window).resize(function(e) {

recover();

});

});

function recover(){

var winw = $(window).width();

var winh = $(window).height();

$("#im").attr({width:winw, height:winh});

}

</script>

利用CSS按比例缩放背景图片

<style type="text/css">

.bd{

background-image:url(a82a2e72e7af59296db0d63e3d2ecc5e!n1200.jpg);

background-repeat:no-repeat;

background-size:cover;

}

</style>

<body>

</body>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类